阵营defaultProps预期

默认情况下，我希望我的lastMessage道具是用一个id的对象无法正常工作。但下面的代码，它出现为null。阵营defaultProps预期

代码：

const App = ({ lastMessage }) => { // lastMessage is currently null 

    return (
     <Message lastMessage={lastMessage} /> 
    ) 
} 

class Message extends Component { 

    constructor(props) { 
     super(props) 
    } 

    componentWillReceiveProps(nextProps) { 
     const data = []; 

     if (nextProps.lastMessage.id !== this.props.lastMessage.id) { 
      log.debug('woohoo'); 
      // do something ... 
     } 
    } 

    render() { 

     return (
      // something... 
     ); 
    } 
} 

Message.defaultProps = { 
    lastMessage: { 
     id: 0, 
    }, 
};

在我App组件我通过lastMessage为null到Message组件。但我在Message组件设置defaultProps：

Message.defaultProps = { 
    lastMessage: { 
     id: 0, 
    },

我希望lastMessage要与一个ID的对象，但它仍然是零。

const App =() => { 

    return (
     <Message /> 
    ) 
}

然后消息组件创建lastMessagedefaultProp作为一个对象：那么，如果lastMessage是null

更奇怪的是，如果我删除lastMessage道具在我的应用程序组件我的应用程序崩溃，因为nextProps.lastMessage.id不起作用一个ID。

如果我的道具是空我想用默认值传递。我想是这样的，但它仍然不能正常工作：

const App = ({ lastMessage = { id: 0 } }) => { // lastMessage is still null 

    return (
     <Message lastMessage={lastMessage} /> 
    ) 
}

我不能正确设置defaultProps？

来源

2017-08-24 user2456977

显式地传递'null'对于proptypes验证是非常有价值的。如果你传递'undefined'而不是它会工作。无论如何，我会编辑if语句，而不是检查'lastMessage'是在尝试访问它上面的'id'之前计算为true的东西。 – trixn

如果传递null到消息组件，你基本上覆盖默认属性 - lastMessage。如果我正确地理解了你，那么当你删除传递给消息组件的lastMessage时，它会起作用。它应该保持这种方式。

您可以传递参数给组件之前做三元感实性检查：

<Message lastMessage={lastMessage ? lastMessage : undefined} />

正如你也想通了，你也可以通过道具默认这种方式：

<Message lastMessage={lastMessage ? lastMessage : { id: 0 }} />

来源

2017-08-24 21:54:51

但最终lastMessage将有一个真正的价值，所以我想通过它 – user2456977

在组件将收到道具检查，如果消息不是虚假的，然后再访问ID。 –

'如果你传递null消息组件，你基本上覆盖默认property' ----有没有办法做一个检查..一样，如果道具是用默认值空通呢？ – user2456977

阵营defaultProps预期

回答

相关问题