ReactJs:PropTypes对于this.props.children应该是什么？

Question

给出一个渲染其子代的简单组件:

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

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

export default ContainerComponent;

问题:儿童道具的propType应该是什么？

当我将其设置为对象时,当我使用具有多个子元素的组件时,它会失败:

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

警告:失败的道具类型: 提供children的类型的无效道具,预期.arrayContainerComponentobject

如果我将它设置为一个数组,如果我只给它一个孩子,它将会失败,即:

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

警告:失败的道具类型:提供给ContainerComponent的类型对象的无效道具子项,预期数组.

请指教,如果我不打算对儿童元素进行propTypes检查？

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

Answer 2

对我来说,这取决于组件.如果您知道需要填充的内容,那么您应该尝试使用以下方式专门指定或使用以下类型:

PropTypes.oneOfType 

但是我发现,通过更多通用组件可以拥有多种类型的孩子,我很乐意使用:

PropTypes.any

如果你想引用一个React组件,那么你将会寻找

PropTypes.element

虽然,

PropTypes.node

描述可以渲染的任何东西 - 字符串,数字,元素或这些东西的数组.如果这适合你,那么就是这样.

Answer 3

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 4

这里的答案似乎并不能完全涵盖对孩子的确切检查。node而且object太宽容了，我想检查确切的元素。这是我最终使用的内容：

• 使用oneOfType([])允许单个或儿童阵列
• 分别用于shape和分别arrayOf(shape({}))用于单个和一组子代
• 使用oneOf的子元素本身

最后，是这样的：

import PropTypes from 'prop-types'
import MyComponent from './MyComponent'

children: PropTypes.oneOfType([
  PropTypes.shape({
    type: PropTypes.oneOf([MyComponent]),
  }),
  PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([MyComponent]),
    })
  ),
]).isRequired

这个问题帮助我更清楚地了解了这一点：https : //github.com/facebook/react/issues/2979

Answer 5

如果要完全匹配组件类型，请检查此

MenuPrimary.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(MenuPrimaryItem),
    PropTypes.objectOf(MenuPrimaryItem)
  ])
}

如果您想完全匹配某些组件类型，请检查此

const HeaderTypes = [
  PropTypes.objectOf(MenuPrimary),
  PropTypes.objectOf(UserInfo)
]

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
    ...HeaderTypes
  ])
}

Answer 6

如果你想包含 render prop 组件：

  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
    PropTypes.func
  ])