javascript - 验证父组件和子组件的 propTypes？

Question

我应该向父组件及其子组件添加 propTypes 吗？

例如我有一个 <Header modal={this.state.modal} lives={this.state.lives} score={this.state.score} />传递 3 个 Prop 的组件，我这样验证:

const Header = function(props) {
  if (props.modal) {
    return (<Logo logo={logo} />);
  } else {
    return (
      <div>
        <Lives lives={props.lives} />
        <Score score={props.score} />
      </div>
      );
  }
};
Header.propTypes = {
  modal: React.PropTypes.bool.isRequired,
  lives: React.PropTypes.number.isRequired,
  score: React.PropTypes.number.isRequired,
};

如您所见，有两个子组件 <Lives lives={props.lives} />和 <Score score={props.score} /> .我也为这些组件添加了 propTypes。

const Score = function(props) {
  return (
    <p className="score score--right">
      {props.score} pts
    </p>
    );
};
Score.propTypes = {
  score: React.PropTypes.number.isRequired,
};

那么检查同一个 Prop 两次是多余的吗？这是否只是让事情过于复杂(使我的代码更难管理)。

Answer 1

在我看来，您应该在每个组件中验证 propTypes，无论它是否已在父组件中验证。这样想:如果一个组件使用了一个 prop，你应该验证 prop 的类型

React 的主要优势之一是组件可重用性。即使在您的情况下，Score 目前可能仅由 Header 使用，您稍后可能会发现它在其他地方和 Score 中很有用从其他来源获取 score，您应该确保它收到正确的类型。

如果您担心生产中这些重复的 proptype 验证的捆绑大小，有一个 bable plugin帮助解决这个问题。