為孩子指定復雜的PropTypes

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>

  )

}

此方法還允許您為子代傳遞道具以及顯示子代之前需要的任何其他功能（例如以特定方式訂購子代）。