ReactJs：这个.props.children的道具类型应该是什么？

Question

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

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

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

export default ContainerComponent;

问题：儿童道具的道具类型应该是什么？

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

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

警告：失败的道具类型：提供给容器组件的数组类型的无效道具子对象。

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

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

警告：失败的属性类型：提供给ContainerComponent的对象类型的属性子级无效，应为数组。

请告诉我，我是否应该省心做一个关于子元素的propTypes检查？




Answer 1

PropTypes文档包含以下内容

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

因此，您可以使用PropTypes.node检查对象或对象数组

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

Answer 2

对我来说，这取决于组件。如果您知道需要填充的内容，则应尝试使用以下方法以独占方式指定或指定多种类型：

PropTypes.oneOfType 

如果您想引用React组件，那么您将查找

PropTypes.element

虽然

PropTypes.node

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

对于非常通用的组件，可以有多种类型的子组件，您也可以使用以下组件-尽管请记住，eslint和ts可能不满意这种缺乏特异性的情况：

PropTypes.any

Answer 3

使用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,
}