我在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'.
我不确定我做错了什么。任何见解都会非常有帮助。谢谢!
答案 0 :(得分: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.'
)
}
})
}
答案 1 :(得分:1)
不是传递组件(因为它们必须导入到工具栏中),你可以只传递道具来定义是否应该显示特定的组件。
const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {
return (
<div className='Toolbar'>
{showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}
{showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}
</div>
)
}
此方法还允许您在显示子项之前为子项传递道具以及所需的任何其他功能(例如以特定方式对子项进行排序)。