断言只有一个孩子在`this.props.children`中传递

Question

有没有办法，使用React.PropTypes要求this.props.children只传递一个孩子？

在我的代码中，如果必须提供单个孩子，我目前在propTypes中声明孩子是强制性的：

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

...然后断言在render方法中传递了正确的数字，例如使用：

const singleChild = this.props.children;

...如果超过一个孩子通过，则可以保证吠叫。

我想知道：

1. 如果有更好的，也许是更惯用的方式？
2. 如果还有任何方式要求传递的子节点具有某些特定的元素类型（尽管我猜这种方式会使this.props.children的目的失败，即允许传递或多或少的任意元素）。

Answer 1

对于PropTypes documentation，PropTypes.element.isRequired是一种惯用的方式，用于指定组件只有一个孩子。

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

另一种选择是使用React.Children.only()，如果只有一个，它将返回子React元素，否则返回错误。如果您需要在运行时保证子类数量（这不是propTypes的目的），则这很方便。

关于问题的第二部分（强制孩子具有特定的元素类型），Airbnb's custom PropType validators包括componentWithName。其用法如下：

  

componentWithName：将属性限制为仅允许具有特定名称/ displayName的组件。接受字符串或正则表达式。还接受带有字符串HOC名称的可选stripHOCs数组的options对象，以在验证之前进行剥离； HOC名称不能包含括号，并且必须在驼峰式大写字母中。

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