抽出/読み取りpropypeに反応する

Question

Reactコンポーネントを視覚的にテストしたい。ユーザーはフォームを使用してコンポーネントの小道具を変更できます。私は、React.PropTypes.oneOf(['green', 'blue', 'yellow'])に基づいて<select>をレンダリングできるようにしたいと考えています。

MyComponent.propTypesを読むと、Reactで定義された関数が返されます。プロップタイプを抽出/読み込む方法はありますか？

Answer 1

あなたは、以来propTypesから直接読み取ることができません機能として。

代わりにpropTypesを生成する中間形式でpropTypeを定義することができます。

var myPropTypes = { 
    color: { 
    type: 'oneOf', 
    value: ['green', 'blue', 'yellow'], 
    }, 
}; 

function processPropTypes(propTypes) { 
    var output = {}; 
    for (var key in propTypes) { 
    if (propTypes.hasOwnProperty(key)) { 
     // Note that this does not support nested propTypes validation 
     // (arrayOf, objectOf, oneOfType and shape) 
     // You'd have to create special cases for those 
     output[key] = React.PropTypes[propTypes[key].type](propTypes[key].value); 
    } 
    } 
    return output; 
} 

var MyComponent = React.createClass({ 
    propTypes: processPropTypes(myPropTypes), 

    static: { 
    myPropTypes: myPropTypes, 
    }, 
}); 

その後、MyComponent.myPropTypesまたはelement.type.myPropTypesを経由して、カスタムpropTypes形式にアクセスすることができました。

このプロセスをやや簡単にするための助けがあります。

function applyPropTypes(myPropTypes, Component) { 
    Component.propTypes = processPropTypes(myPropTypes); 
    Component.myPropTypes = propTypes; 
} 

applyPropTypes(myPropTypes, MyComponent); 

Answer 2

あなたが行っていることのコード例を追加することがありますが、わかりませんがなぜpropTypeにアクセスしていますか？ PropTypesには値は含まれていませんが、コンポーネントに渡されたさまざまな小道具の値の型が何であるかを予測します。

小道具を変更できるフォームをお持ちの場合は、選択コンポーネントをレンダリングするコンポーネントに小道具を渡していると仮定します。これらの小道具は、小道具オブジェクトからアクセスできます。

次を使用することができ、異なる種類の形を持つことができpropTypesを検証しようとしている場合：あなたはそれらが定義されている、言ったように

optionalUnion: React.PropTypes.oneOfType([ 
    React.PropTypes.string, 
    React.PropTypes.number, 
    React.PropTypes.instanceOf(Message) 
]) 

Answer 3

は実際に、それは可能です：axe-prop-types