reactjs - react : Validate that no extra props has been passed

Question

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

有没有一种(标准)方法可以让 React 也验证没有传递额外的 props ？

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