javascript - React defaultProps 未按预期工作

Question

默认情况下，我希望我的 lastMessage 属性是一个带有 id 的对象。但对于下面的代码，它显示为 null。

代码:

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 的对象，但它仍然为 null。然后我的应用程序崩溃，因为如果 lastMessage 为 null

， nextProps.lastMessage.id 将无法工作

如果我删除 App 组件中的 lastMessage 属性，那就更奇怪了:

const App = () => {

    return (
        <Message />
    )
}

然后 Message 组件将 lastMessage defaultProp 创建为具有 id 的对象。

如果我的 prop 为 null，我会尝试使用默认值传递它。我尝试了类似的方法，但仍然不起作用:

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

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

我是否没有正确设置defaultProps？

Answer 1

如果将 null 传递给 Message 组件，则基本上会覆盖默认属性 - lastMessage。如果我理解正确，那么当您删除将 lastMessage 传递给消息组件时，它就会起作用。它应该保持这样。

您可以在将参数传递给组件之前进行三元真实性检查:

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

正如您所发现的，您也可以通过这种方式传递默认 Prop :

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