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

这会导致以下错误:

警告: Prop 类型失败:提供给“工具栏”的 Prop “子项”无效。

我不确定我做错了什么。任何见解都会非常有帮助。谢谢!

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.'
            )
        }
    })
}