ReactJs：对于此props.children，PropType应该是什么？

reactjs React.js

小胖Jim

2020-03-10

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

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

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

export default ContainerComponent;

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

当我将其设置为对象时，当我将组件与多个子级一起使用时，它将失败：

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

警告：无法道具类型：无效的支柱children型的array 供给ContainerComponent，预计object。

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

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

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

请告知，我是否应该不麻烦对子元素进行propTypes检查？

第478篇《ReactJs：对于此props.children，PropType应该是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小哥达蒙卡卡西 2020.03.10

如果要完全匹配组件类型，请选中此

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
  ])
}
阿飞小卤蛋 2020.03.10

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,
}
Tony小卤蛋 2020.03.10

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

PropTypes.oneOfType

但是，我最发现的是，拥有更多可以具有多种类型子项的通用组件，我很乐于使用：

PropTypes.any

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

PropTypes.element

虽然，

PropTypes.node

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android