React:验证是否没有通过任何额外的道具

Question

我在React中使用propTypes，因为我喜欢它在我传递一些愚蠢的东西时警告我的方式。但有时我拼错了道具，或者忘记把它放在propTypes中，它永远不会得到验证。

有没有一种（标准）方法可以让React也验证没有通过额外的道具

Answer 1

我不确定是否有标准的方法，但您肯定可以使用Object.keys进行快速而肮脏的检查。

var propsCount = Object.keys(this.props).length,
    propTypesCount = Object.keys(this.propTypes).length;
if(propsCount === propTypesCount) {
  // correct number of props have been passed
}

您必须注意的唯一边缘情况是props.children，因为如果您在组件中嵌套组件/HTML，它将作为一个隐式属性出现。

如果您想要一种更细粒度的方法，那么您必须自己挑选密钥并迭代它们，进行检查。

var passedPropNames = new Set(Object.keys(this.props)),
    expectedPropNames = new Set(Object.keys(this.propTypes));
passedPropNames.forEach(function(propName) {
  if(!expectedPropNames.has(propName)) {
    console.warn('Not expecting a property called', propName);
  }
});
expectedPropNames.forEach(function(propName) {
  if(!passPropNames.has(propName)) {
    console.warn('Expected a property called', propName);
  }
});

Answer 2

这将按照您的要求执行。

 componentDidMount() {
    let matchPropTypes = Object.keys(this.constructor.propTypes).every((a, index) => a === Object.keys(this.props)[index])
    if (!matchPropTypes) {console.log('propTypes do not match props', Object.keys(this.constructor.propTypes), Object.keys(this.props))}
  }