React.js - 默认 prop 不与 `null` 一起使用答案

【问题标题】：React.js - default prop is not used with `null` is passedReact.js - 默认 prop 不与 `null` 一起使用
【发布时间】：2016-04-20 22:26:56
【问题描述】：

我的 React 组件中有默认道具：

PropertyTitleLabel.defaultProps = {
    bedrooms: 1,
    propertyType: 'flat'
};
PropertyTitleLabel.propTypes = {
    bedrooms: PropTypes.number,
    propertyType: PropTypes.string
};

但是当我将null 传递给bedrooms 时，就像：

const bedrooms = null; // in real world API returns `null`
<Component bedrooms={bedrooms} />

它没有被默认道具取代:(有什么想法吗？

【问题讨论】：

另外，如果你使用一个不带PropTypes.exact的假值，那么默认的prop也不会被使用。

标签： javascript reactjs components

【解决方案1】：

您可以将null 值更改为undefined 以使用默认值。

<Component bedrooms={bedrooms || undefined} />

【讨论】：

作为其他可能登陆这里的人的帮助者，请不要使用 mixins。 @jagsler 我希望您可以考虑更新您的原始答案。 reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
仍然不是一个优雅的解决方案，所以你设置默认道具 2 次......

【解决方案2】：

我认为null 和undefined 在处理defaultProps 时存在区别。 null 值可能是预期行为，因此不会被您的默认值替换，而 undefined 不会被替换。

如文档中所述

[...] 用于确保 this.props.value 在父组件未指定的情况下会有一个值。

这是related issue。

【讨论】：

【解决方案3】：

undefined = 没有。
null = 暗示“无”的东西。

undefined 在现实中并不存在。 null 但是确实存在。这意味着undefined 不会传递道具值，因为你不能传递不存在的东西。由于null 不是什么都不是，而是只是暗示什么，所以它传递了道具。

【讨论】：