reactjs - 読み込み - withstyles 使い方




ReactJSでネストされたオブジェクトのPropTypesをどのように検証しますか? (2)

React.PropTypes.shape のタイプチェックのレベルが得られない場合は、 tcomb-react tcomb-react ください。

toPropTypes() 関数を提供します。これにより、 tcomb-validation を使用して検証を実行し、 カスタム propTypes バリデーター を定義するためのReactのサポートを利用して、 tcomb ライブラリーで定義されたスキーマを検証できます。

そのドキュメントからの基本的な例

// define the component props
var MyProps = struct({
  foo: Num,
  bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});

// a simple component
var MyComponent = React.createClass({

  propTypes: toPropTypes(MyProps), // <--- !

  render: function () {
    return (
      <div>
        <div>Foo is: {this.props.foo}</div>
        <div>Bar is: {this.props.bar}</div>
      </div>
    );
  }    
});

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

<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.PropTypesprop-types パッケージに移動しました。

import PropTypes from 'prop-types';    

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

詳細情報





reactjs