ReactJs：this.props.children 的 PropTypes 应该是什么？

Question

给定一个呈现其子级的简单组件：

 class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

问题：children prop 的 propType 应该是什么？

当我将它设置为对象时，当我使用具有多个子项的组件时它会失败：

 <ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

Warning: Failed prop type: Invalid prop children of type array supplied to ContainerComponent , expected object .

如果我将它设置为一个数组，如果我只给它一个孩子，它将失败，即：

 <ContainerComponent>
  <div>1</div>
</ContainerComponent>

警告：道具类型失败：提供给 ContainerComponent 的类型对象的无效道具子项，预期数组。

请告知，我是否应该不费心检查子元素的 propTypes ？

原文由 d3ming 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 oneOfType 或 PropTypes.node 尝试这样的事情

import PropTypes from 'prop-types'

...

static propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
}

或者

static propTypes = {
    children: PropTypes.node.isRequired,
}

原文由 Alexander Staroselsky 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对我来说，这取决于组件。如果您知道需要填充什么，那么您应该尝试使用以下方式专门指定或多种类型：

 PropTypes.oneOfType

如果你想引用 React 组件，那么你将寻找

PropTypes.element

虽然，

 PropTypes.node

描述任何可以呈现的东西——字符串、数字、元素或这些东西的数组。如果这适合您，那么这就是方法。

对于 非常 通用的组件，who 可以有多种类型的子组件，您也可以使用下面的组件。但是我不推荐它。正如下面的评论中提到的，它确实在某种程度上破坏了使用 PropTypes 的意义，通常还有其他方法可以指定您的组件需要什么。还要记住，eslint 和 ts 可能（可能）对这种缺乏特异性不满意：

 PropTypes.any

原文由 ggilberth 发布，翻译遵循 CC BY-SA 4.0 许可协议