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

Question

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

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

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 定义了您的组件所需的属性和类型。在父子组件中定义它并不是真正多余的，因为这个想法是 Score 组件是一个表示组件，如果需要可以在其他地方重用。

因此，确保您的 Score 组件接收到预期的属性确实是一个很好的做法。它还让您了解您的组件对外部数据的 'dependencies'。

Answer 2

在我看来，你应该在每个组件中验证propTypes，不管它是否已经在父组件中验证过。这样想：如果一个组件使用了一个道具，你应该验证道具的类型

React 的主要优势之一是组件可重用性。即使在你的情况下，Score 目前可能只被 Header 使用，你以后可能会发现它在其他地方有用并且 Score 从其他地方得到 score源，你应该确保它收到正确的类型。

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

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

Validate propTypes on parent and child components?

javascript

jsx

ecmascript-6

reactjs