38

如何验证提供的道具是组件类（而不是实例）？

例如

export default class TimelineWithPicker extends React.PureComponent {

    static propTypes = {
        component: PropTypes.any, // <-- how can I validate that this is a component class (or stateless functional component)?
    };

    render() {
        return (
            <this.props.component {...this.props} start={this.state.start}/>
        );
    }
}
4

2 回答 2

52

对于使用PropTypes >= 15.7.0new的任何人，都已PropTypes.elementType在此拉取请求中添加并于2019 年 2 月 10 日发布。

此道具类型支持所有组件（本机组件、无状态组件、有状态组件、前向引用React.forwardRef、上下文提供者/消费者）。

当不是这些元素中的任何一个时，它会引发警告，当传递的道具是元素（PropTypes.element）而不是类型时，它也会引发警告。

最后，您可以像使用任何其他道具类型一样使用它：

const propTypes = {
    component: PropTypes.elementType,
    requiredComponent: PropTypes.elementType.isRequired,
};
于 2019-04-21T16:26:43.920 回答
25

已编辑：将React 的FancyButton示例添加到代码沙箱以及与React.forwardRefReact 16.3 中的新 api 一起使用的自定义道具检查功能。React.forwardRefapi 返回一个带有render函数的对象。我正在使用以下自定义道具检查器来验证此道具类型。- 感谢 Ivan Samovar 注意到这一需求。

FancyButton: function (props, propName, componentName) {
  if(!props[propName] || typeof(props[propName].render) != 'function') {
    return new Error(`${propName}.render must be a function!`);
  }
}

你会想要使用PropTypes.element. 实际上......PropType.func适用于无状态功能组件和类组件。

我已经制作了一个沙箱来证明它是有效的......考虑到我一开始给你错误的信息，我认为这是必要的。对此非常抱歉！

工作沙箱示例！

以下是链接失效时的测试代码：

import React from 'react';
import { render } from 'react-dom';
import PropTypes from "prop-types";

class ClassComponent extends React.Component {
  render() {
    return <p>I'm a class component</p>
  }
}

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

const FSComponent = () => (
    <p>I'm a functional stateless component</p>
);

const Test = ({ ClassComponent, FSComponent, FancyButton }) => (
  <div>
    <ClassComponent />
    <FSComponent />
    <FancyButton />
  </div>
);
Test.propTypes = {
  ClassComponent: PropTypes.func.isRequired,
  FSComponent: PropTypes.func.isRequired,
  FancyButton: function (props, propName, componentName) {
    if(!props[propName] || typeof(props[propName].render) != 'function') {
      return new Error(`${propName}.render must be a function!`);
    }
  },
}

render(<Test
         ClassComponent={ ClassComponent }
         FSComponent={ FSComponent }
         FancyButton={ FancyButton } />, document.getElementById('root'));
于 2017-07-26T02:28:23.547 回答