为 children 指定复杂的 PropType

Question

我正在用 React 编写一个小的 Toolbar 组件。使用方法如下：

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

或

<Toolbar>
    <ToolbarButtonSearch />
</Toolbar>

或

<Toolbar>
    <ToolbarButtonFold />
</Toolbar>

我希望能够指定唯一的 children 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>

  )

}

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

为 children 指定复杂的 PropType

Specifying complex PropTypes for children

javascript

reactjs

react-proptypes