ReactJS 组件 PropTypes - 指定具有一组参数的函数类型

IT技术 javascript reactjs
2021-05-17 14:16:09

我在 react（0.13.3 版）组件中指定了一个必需的函数 proptype...

var MyComponent = React.createClass({
    propTypes : {
        onClick : React.PropTypes.func.isRequired
    },

    handleClick(event) {
        this.props.onClick(event, clickCallback);
    },

    clickCallback() {
        console.log("foo");
    },

    render() {
        return <div onClick={this.handleClick}></div>
    }
});

export default MyComponent;

如您所见，我的 onClick props不仅需要是一个函数，还需要接受 2 个参数。有没有办法使用 React PropTypes 来指定它？

我已经阅读了关于可重用组件的React 文档条目，似乎只有一种方法可以定义对象类型的形状，而不是函数类型。

2个回答

您可以尝试使用自定义验证器：

propTypes : {
    onClick : function(props, propName, componentName) {
        var fn = props[propName];
        if(!fn.prototype ||
           (typeof fn.prototype.constructor !== 'function' &&
            fn.prototype.constructor.length !== 2)) {
            return new Error(propName + 'must be a function with 2 args');
        }
    }
}

好的，我查了一下，这可能就是答案（现在无法测试）。因此，您可以为 PropTypes 传递验证函数，例如：

propTypes : {
  onClick : function(props, propName, componentName) {
    if (!props.event || !props.callback) {
       return new Error('Too few arguments');
    }
  }
}

查看这篇文章了解详情：http : //developer.fortnox.se/blog/proptypes-in-react-js/

其它你可能感兴趣的问题
上一篇如何在 Rails 中使用 npm 包？ 下一篇如何在玩笑中模拟/监视 useState 钩子？