React.js - 默認 prop 不與 `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不會並且將被替換。

如文檔中所述

[...] 用於確保 this.props.value 在父組件未指定的情況下將具有值。

這是一個相關的問題。

Answer 3

• undefined = 沒有。
• null = 暗示“無”的東西。

undefined在現實中是不存在的。 null但是確實存在。 這意味着undefined不會傳遞 prop 值，因為你不能傳遞不存在的東西。 由於null不是什么都沒有，而是只是暗示什么都沒有，所以它傳遞了 props。