javascript - react defaultProps无法按预期工作

默认情况下，我希望我的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组件。但是我在defaultProps组件中设置了Message：

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

我希望lastMessage是具有id的对象，但是它仍然为null。然后我的应用程序崩溃，因为如果nextProps.lastMessage.id为lastMessage的null不起作用

如果我在我的App组件中删除了lastMessage属性，那就更陌生了：

const App = () => {

    return (
        <Message />
    )
}

然后，消息组件将lastMessage defaultProp创建为具有ID的对象。

如果我的道具为null，则尝试使用默认值传递它。我尝试过类似的方法，但仍然无法正常工作：

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

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

我没有正确设置defaultProps吗？

最佳答案

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

您可以在将参数传递给component之前执行三元真实性检查：

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

如您所知，您还可以通过以下方式传递默认道具：

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