为孩子指定复杂的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>

  )

}

此方法还允许您为子代传递道具以及显示子代之前需要的任何其他功能（例如以特定方式订购子代）。