Javascript 为子级指定复杂的proptype

我正在React中编写一个小的

工具栏
组件。以下是它的使用方法：

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

以下是我如何使用它：

<Toolbar>
    <ToolbarButtonFold />
</Toolbar>



这将导致以下错误：

警告：失败的道具类型：为“工具栏”提供的道具“子项”无效。

我不确定我做错了什么。任何见解都会非常有用。谢谢
 您是否尝试过：

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

您是否尝试过：

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

您可以只传递定义是否应显示特定组件的道具，而不是传递组件（因为它们必须导入工具栏）

const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {

  return (

    <div className='Toolbar'>

      {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}

      {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}

    </div>

  )

}

const-Toolbar=（{showButtonSearch=false，showButtonFold=false，buttonsearch-props={}，buttonFoldProps={}）=>{
返回(
{showButtonSearch？：null}
{showButtonFold？：null}
)
}

此方法还允许您在显示子项之前为子项传递道具以及所需的任何其他功能（例如以特定方式对子项排序）。
而不是传递组件（因为它们必须导入工具栏），您可以只传递定义是否应显示特定组件的道具

const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {

  return (

    <div className='Toolbar'>

      {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}

      {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}

    </div>

  )

}

const-Toolbar=（{showButtonSearch=false，showButtonFold=false，buttonsearch-props={}，buttonFoldProps={}）=>{
返回(
{showButtonSearch？：null}
{showButtonFold？：null}
)
}

此方法还允许您在显示子对象之前为子对象传递道具以及所需的任何其他功能（例如以特定方式对子对象进行排序）。
我敢肯定，您无法完成所尝试的任务。children属性的类型为React.PropTypes.node，您可以将其限制为单个元素或元素数组，但元素本身不是组件类的实例。这令人失望，坦率地说，令人惊讶。我希望React具有此功能，因为我不会尝试任何超出常规的东西。你有什么建议可以更好地强制执行特定的儿童？有办法吗？我很确定你没有办法完成你的尝试。children属性的类型为React.PropTypes.node，您可以将其限制为单个元素或元素数组，但元素本身不是组件类的实例。这令人失望，坦率地说，令人惊讶。我希望React具有此功能，因为我不会尝试任何超出常规的东西。你有什么建议可以更好地强制执行特定的儿童？是否有一种方法？是的，问题是这不包括
工具栏
同时包含
折叠
和
搜索
的情况。然后您可以将这两个组件包装在
工具栏儿童包装器
中，并将其定义为propType。在这个包装中，您可以有一个或两个。那么
工具栏
组件看起来像
Toolbar
ToolbarChildrenWrapper
[ToolbarFold，ToolbarSearch]
？这只会在
工具栏ChildrenWrapper
上产生同样的问题。明白了，也许你可以使用我编辑过的答案。是的，问题是，这不包括
工具栏
同时包含
折叠
和
搜索
的情况。然后，您可以将这两个组件包装在
工具栏儿童包装器
中，并将其定义为propType。在这个包装中，您可以有一个或两个。那么
工具栏
组件看起来像
Toolbar
ToolbarChildrenWrapper
[ToolbarFold，ToolbarSearch]
？这只会在
工具栏ChildrenWrapper
上产生同样的问题。明白了，也许你可以使用我编辑过的答案。这是一个有趣的方法。如果有大量的组件，它会变得笨拙，所以这不是一个完美的解决方案，但它应该适合我的用例。谢谢这是一个有趣的方法。如果有大量的组件，它会变得笨拙，所以这不是一个完美的解决方案，但它应该适合我的用例。谢谢
const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {

  return (

    <div className='Toolbar'>

      {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}

      {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}

    </div>

  )

}