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

小胖Jim2020-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检查？

小哥达蒙卡卡西2020/03/10 13:36:02

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

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 13:36:01

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 13:36:01

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

PropTypes.oneOfType

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

PropTypes.any

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

PropTypes.element

虽然，

PropTypes.node

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer