React.js - 默认属性不与 `null` 一起使用

Question

我的 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} />

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

Answer 1

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

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

Answer 2

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

如文档中所述

[...] used to ensure that this.props.value will have a value if it was not specified by the parent component.

这里是related issue.

Answer 3

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

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

React.js - 默认属性不与 `null` 一起使用

React.js - default prop is not used with `null` is passed

javascript

components

reactjs