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

小能豆

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

javascript

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

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>

警告：失败的道具类型：提供给的道具children类型无效，预期为。array``ContainerComponent``object

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

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

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

请指教，我是否应该不去检查子元素的 propTypes？

阅读 37

2024-06-10

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

2024-06-10