web-dev-qa-db-ja.com

React.js-デフォルトのプロップは使用されず、nullが渡されます

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

デフォルトのプロップに置き換えられません:(アイデアはありますか？

javascriptreactjscomponents
26
Kosmetika

null値をundefinedに変更して、デフォルト値を使用できます。

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

nullとundefinedの違いは、defaultPropsを処理するときに行われると思います。 null値は意図した動作である可能性があるため、デフォルトで置き換えられませんが、undefinedは置き換えられず、置き換えられます。

ドキュメントに記載されているように

[...] this.props.valueが親コンポーネントによって指定されていない場合に値を持つことを保証するために使用されます。

関連する問題 です。

13
Balthazar