组件或元素的正确类型是什么

Question

我正在创建一个组件，我希望元素类型是可配置的。

const Col = ({ containerElement, children }) => {
  return (
    <containerElement>
      {children}
    </containerElement>
  );
};

Col.defaultProps = {
  containerElement: 'div'
};

所以容器元素可以是上面的defaultProps中的元素，也可以是组件。

<Col containerElement={<MyComponent} />

我不能得到的propTypes验证，我已经尝试了这个：

Col.propTypes = {
  className: PropTypes.string,
  containerElement: PropTypes.oneOf([
    PropTypes.string,
    PropTypes.element
  ]),

但它不能正确验证。

提供给Col的值div的prop组件类无效，

Answer 1

试试这个：

Col.propTypes = {
    className: PropTypes.string,
    containerElement: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.func
    ]),
}

因为React组件是全局意义上的函数

typeof (class MyClass {}) // => "function"

Answer 2

您没有在组件上定义componentClass属性-您的道具称为containerElement，您应该使用oftype：

Col.propTypes = {
  className: PropTypes.string,
  containerElement: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ])

Answer 3

现在是道具类型15.7。0发布后，您可以执行以下操作：

Col.propTypes = {
  ...
  containerElement: PropTypes.elementType,
}