反应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。 然后，我的应用程序崩溃，因为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吗？

Answer 1

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

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

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

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

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