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
  ]),

但它没有正确验证。

警告：propType失败：值componentClass的道具div无效提供给Col，

Answer 1

您的组件未定义componentClass属性 - 您的道具称为containerElement，您应该使用oneOfType：

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

Answer 2

试试这个：

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

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

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

Answer 3

现在发布了道具类型 15.7.0 的您可以：

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

组件或元素的正确PropType是什么

3 个答案: