コンポーネントの子が1つ以上の特定のタイプになるようなリアクションコンポーネント

コンポーネントの子が1つ以上の特定のタイプになるようにReactコンポーネントの型チェックを宣言しようとしています。コンポーネントの子が1つ以上の特定のタイプになるようなリアクションコンポーネント

私が反応ドキュメントhereを踏襲し、予想されるpropTypeは種類の労働組合の配列であることを宣言したが、これが動作しないようです。私は私が間違っているのかわからないのですが、コードは

"Warning: Failed prop type: Invalid prop `children` supplied to `Body`."

コードのようなランタイムエラーが発生：

function Body(props) { 
    return React.Children.count(props.children) > 0 && (
    <div className="body"> 
     {props.children} 
    </div> 
); 
} 

Body.propTypes = { 
    children: React.PropTypes.arrayOf(
    React.PropTypes.oneOfType([ 
     React.PropTypes.instanceOf(Content), 
     React.PropTypes.instanceOf(Actions) 
    ]) 
) 
}; 

<Body> 
    <Content>...</Content> 
    <Actions>...</Actions> 
</Body>

おかげで、ジョージ

出典

2016-12-06 George S.

あなたが代わりに

Body.propTypes = { 
    children: React.PropTypes.oneOfType([ 
     React.PropTypes.arrayOf(React.PropTypes.node), 
     React.PropTypes.node 
    ]) 
};

を使用する必要がありますが

これは、childrenが1つ以上のJSX n odes。

出典

2016-12-06 03:55:56 user1200514

これは、子が 'Content'と' Actions'であるかどうかを検証しません。これはどんな種類のノードでも盲目的に受け入れます。 –

あなたはこのような何かを行うことができます。

Body.propTypes = { 
    children: React.PropTypes.oneOfType([ 
    React.PropTypes.arrayOf(React.PropTypes.shape({ 
     type: React.PropTypes.oneOf([Content, Actions]) 
    })), 
    React.PropTypes.shape({ 
     type: React.PropTypes.oneOf([Content, Actions]) 
    }) 
    ]) 
};

はフィドルを参照してください：https://jsfiddle.net/free_soul/oz71mu6g/2/

React.PropTypes.instanceOfが、実際にはJavaScript instanceOfを使用して実装され、それが反応通常のJavaScript "クラス" を期待していませんクラス。議論hereを参照してください。

出典

2016-12-06 07:42:40

空の/ nullの子を許可する方法はありますか？oneOfType（）に "null"を追加しようとしましたが、動作しませんでした。ドキュメントは "null"または "空"については何も言わない –

しかし、あなたの質問では、 "特定のタイプの1つ以上"と言いました。 'null'を警告し、' isRequired'にしないようにしたい場合は、同じ効果があります。 –

コンポーネントの子が1つ以上の特定のタイプになるようなリアクションコンポーネント

答えて

関連する問題