断言在' this.props.children '中只传递了一个子节点

assert that only single child is passed in `this.props.children`

本文关键字：一个 子节点 this props children 断言      更新时间：2023-09-26

是否有一种方法，使用React.PropTypes来要求在this.props.children中只传递一个子节点?

我目前在我的代码中，在必须提供单个子节点的情况下，声明propTypes中的子节点是强制性的:

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

白马王子;然后断言在render方法中传递了正确的数字，例如使用:

const singleChild = this.props.children;

白马王子;如果超过一个孩子通过，它保证会吠叫。

我在想:

  1. 是否有更好的，也许更习惯的方式?
  2. 如果有进一步的任何方式来要求传递的子元素是一些特定的元素类型(尽管我猜这有点违背this.props.children的目的，即允许传递或多或少的任意元素)。

根据PropTypes文档，PropTypes.element.isRequired是指定组件只有一个子组件的惯用方法。

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

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

关于你问题的第二部分(强制子元素具有特定的元素类型)，Airbnb的自定义PropType验证器包括componentWithName。其用法如下:

componentWithName:限制prop只允许具有特定名称/displayName的组件。接受字符串或正则表达式。还接受一个options对象，该对象带有一个可选的stripHOCs数组，其中包含要在验证之前剥离的字符串HOC名称;HOC名称不能包含圆括号，并且必须使用驼峰大小写。

foo: componentWithName('Component')
foo: componentWithName('Component', { stripHOCs: ['withDirection', 'withStyles'] })
相关文章：