子どもの複雑なPropTypeを指定する

Question

私はReactに小さなToolbarコンポーネントを書いています。ここでは、それが使用されるべき方法は次のとおりです。

<Toolbar> 
    <ToolbarButtonSearch /> 
    <ToolbarButtonFold /> 
</Toolbar> 

または

<Toolbar> 
    <ToolbarButtonSearch /> 
</Toolbar> 

または

<Toolbar> 
    <ToolbarButtonFold /> 
</Toolbar> 

私は、Toolbarが受け入れる唯一の子供たちがToolbarButtonSearchの一つであることを指定できるようにしたいと思いますToolbarButtonFoldのいずれか、またはそれぞれのいずれかです。ここで

export default class Toolbar extends React.Component { 

    static get propTypes() { 
     const acceptedChildren = 
      React.PropTypes.oneOfType([ 
       React.PropTypes.instanceOf(ToolbarButtonFold), 
       React.PropTypes.instanceOf(ToolbarButtonSearch) 
      ]); 

     return { 
      children: React.PropTypes.oneOfType([ 
       React.PropTypes.arrayOf(acceptedChildren), 
       acceptedChildren 
      ]).isRequired 
     }; 
    } 

    render() { 
     return (
      <div className="toolbar"> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

私はそれを使用している方法は次のとおりです：ここで

は（輸入品を含めない）私が今持っているものだ

これは、次のエラーが発生し

<Toolbar> 
    <ToolbarButtonFold /> 
</Toolbar> 

：

Warning: Failed prop type: Invalid prop 'children' supplied to 'Toolbar'.

私は何が間違っているのか分かりません。どんな洞察も非常に役に立ちます。ありがとう！

Answer 1

あなたが実行しようとしましたしました：特定のコンポーネントを表示するかどう

customProp: function (props, propName, componentName) { 
    props.children.forEach(child => { 
     if (!child instanceof ToolbarButtonSearch && !child instanceof ToolbarButtonFold) { 
      return new Error(
       'Invalid children supplied to' + 
       ' `' + componentName + '`. Validation failed.' 
      ) 
     } 
    }) 
} 

Answer 2

を代わりに部品を渡す（彼らはとにかく、ツールバーにインポートする必要があるため）、あなただけの定義小道具を渡すことができます。

const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => { 

    return (

    <div className='Toolbar'> 

     {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null} 

     {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null} 

    </div> 

) 

} 

この方法はまた、あなたが子供のための小道具としてだけでなく、あなたが（そのような子どもたちに、特定の方法を発注など）の子どもを表示する前に必要な任意のさらなる機能を渡すことができるようになります。