Javascript 断言在'this.props.children'中只传递一个子项`

有没有一种方法，使用

React.PropTypes

来要求只向

this.props.children

传递一个孩子

如果必须提供一个孩子，我目前在代码中所做的是声明在

propTypes

中孩子是强制性的：

propTypes {
    ...
    children: React.PropTypes.element.isRequired
}

…然后断言在

render

方法中传递了正确的数字，例如通过使用：

const singleChild = this.props.children;

…如果超过一个孩子通过，保证会吠叫

我想知道：

如果有更好的，也许更惯用的方法

如果有任何进一步的方法要求传递的子元素是某些特定的元素类型（尽管我猜这有点违背了

this.props.children

的目的，即允许传递更多或更少的任意元素）

根据，

PropTypes.element.isRequired

是指定组件只有一个子组件的惯用方法

MyComponent.propTypes={
子项：PropTypes.element.isRequired
};

另一个选项是使用React，如果只有一个元素，则返回子React元素，否则返回错误。如果您需要保证运行时的子级数量（propTypes不适用于这些子级），那么这很方便

关于问题的第二部分（强制子元素具有特定的元素类型），包括一个

componentWithName

。其用途如下：

componentWithName：将道具限制为仅允许具有特定名称/显示名称的组件。接受字符串或正则表达式。还接受一个选项对象，该对象具有可选的stripHOCs字符串数组，该数组包含要在验证之前剥离的特殊名称；HOC名称不得包含括号，且必须为大小写

---

文档中似乎提到了与您所做的相同的内容。您也可以按照文档中的描述编写一个自定义验证器，但它可能会让我觉得更详细。

foo: componentWithName('Component')
foo: componentWithName('Component', { stripHOCs: ['withDirection', 'withStyles'] })