Question

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

例如，我有一个<Header modal={this.state.modal} lives={this.state.lives} score={this.state.score} />组件，它传递了3个道具，我这样验证：

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

两次检查相同的道具是多余的？这只是过于复杂的事情（使我的代码更难管理）。

Answer 1

在我看来，您应该在每个组件中验证propTypes，无论它是否已在父组件中验证。想一想：如果组件使用道具，则应验证道具的类型

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

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

Answer 2

PropTypes类定义了组件所期望的属性和类型。在父组件和子组件中定义它并不是多余的，因为分数组件是一个表示组件，可以在必要时在其他地方重用。

因此，确保您的乐趣组件获得预期的属性确实是一种很好的做法。它还让您了解＆＃39;依赖＆＃39;您的组件必须具有外部数据。

验证父组件和子组件上的propTypes？

2 个答案: