Question

我试图在React组件上声明类型检查，以便组件的子组件可以是某些类型中的一个或多个。

我遵循了React文档here，并将预期的propType声明为类型联合的数组，但似乎这不起作用。我不确定我做错了什么，但代码导致运行时错误，如

"Warning: Failed prop type: Invalid prop `children` supplied to `Body`."

代码：

function Body(props) {
  return React.Children.count(props.children) > 0 && (
    <div className="body">
      {props.children}
    </div>
  );
}

Body.propTypes = {
  children: React.PropTypes.arrayOf(
    React.PropTypes.oneOfType([
      React.PropTypes.instanceOf(Content),
      React.PropTypes.instanceOf(Actions)
    ])
  )
};

<Body>
  <Content>...</Content>
  <Actions>...</Actions>
</Body>

谢谢，乔治

Answer 1

您应该使用

Body.propTypes = {
  children: React.PropTypes.oneOfType([
      React.PropTypes.arrayOf(React.PropTypes.node),
      React.PropTypes.node
    ])
};

这告诉children可以是一个或多个JSX节点。

Answer 2

您可以这样做：

Body.propTypes = {
  children: React.PropTypes.oneOfType([
    React.PropTypes.arrayOf(React.PropTypes.shape({
      type: React.PropTypes.oneOf([Content, Actions])
    })),
    React.PropTypes.shape({
      type: React.PropTypes.oneOf([Content, Actions])
    })
  ])
};

请参阅小提琴：fiddle

React.PropTypes.instanceOf实际上是使用JavaScript https://jsfiddle.net/free_soul/oz71mu6g/2/实现的，它期望一个常规的JavaScript“类”而不是一个React类。请参阅讨论instanceOf。

反应组件，使组件的子组件可以是某种类型中的一种或多种

2 个答案: