Question

我正在使用propTypes与React，因为我喜欢当我传递一些愚蠢的东西时它如何警告我。但有时候我拼错了我的道具，或者我忘了把它放在我的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))}
  }

React：验证没有传递额外的道具

2 个答案: