ReactJS 组件 PropTypes - 用一组参数指定函数类型答案

【问题标题】：ReactJS component PropTypes - specify a function type with a set number parametersReactJS 组件 PropTypes - 用一组参数指定函数类型
【发布时间】：2015-10-22 10:27:59
【问题描述】：

我在一个 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 属性不仅需要是一个函数，还需要接受 2 个参数。有没有办法使用 React PropTypes 来指定这个？

我已经阅读了React docs entry on re-usable components，似乎只有一种方法可以定义对象类型的形状，但不能定义函数类型。

【问题讨论】：

“形状”是什么意思？传递参数的内容？如果我的理解正确，Flow 可能是一个答案：flowtype.org
@zvona 我会修改我的问题更清楚，但基本上我想指定 this.props.onClick 是一个函数，它接受 2 个参数。
AFAIK，在 React 内部没有办法做到这一点。但是请检查 Flow，它定义了类型注释和必需的参数。当您运行流程时，它会捕获这些错误（例如参数太少）并将它们显示在终端中。
现在我明白了你所说的形状是什么意思。有React.PropTypes.shape，但显然不能与函数一起使用。
@zvona 是的，感谢您的帮助 - 我会看看流程。虽然当我们在 ES7 中获得类型提示时这似乎没有实际意义

标签： javascript reactjs

【解决方案1】：

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

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');
        }
    }
}

【讨论】：

可以扩展它来检查函数参数的 typeof 吗？
另外，这不适用于箭头函数？

【解决方案2】：

好的，我检查了一下，这可能是答案（现在无法测试）。因此，您可以为 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/

【讨论】：

感谢您的支持。虽然我认为@edoloughlin 提供了一个完全正确的答案。