1. ホーム
  2. reactjs

[解決済み】ReactJSでネストされたオブジェクトのPropTypesを検証する方法は?

2022-04-12 03:31:45

質問

ReactJSのコンポーネントのpropsとしてデータオブジェクトを使用しています。

<Field data={data} />

PropTypesオブジェクト自体を検証するのは簡単だと思いますが。

propTypes: {
  data: React.PropTypes.object
}

しかし、内部の値を検証したい場合はどうすればよいのでしょうか? 例えば、data.id や data.title など?

props[propName]: React.PropTypes.number.required // etc...

解決方法は?

を使用することができます。 React.PropTypes.shape を使用してプロパティを検証します。

propTypes: {
    data: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      title: React.PropTypes.string
    })
}

更新情報

コメントで @Chris さんが指摘されているように、React バージョン 15.5.0 の時点では React.PropTypes はパッケージに移動しました。 prop-types .

import PropTypes from 'prop-types';    

propTypes: {
    data: PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string
    })
}

詳細情報