親コンポーネントと子コンポーネントのpropTypeを検証しますか？

Question

親コンポーネントとその子コンポーネントにpropTypeを追加する必要がありますか？

は、例えば、私は3つの小道具を渡され<Header modal={this.state.modal} lives={this.state.lives} score={this.state.score} />コンポーネントを持っているし、私のようなので、検証：

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

次の2つの子コンポーネント<Lives lives={props.lives} />と<Score score={props.score} />がある見ることができるように。これらのコンポーネントにもpropTypeを追加しました。

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

同じ小道具を2回確認するのは冗長ですか？そしてこれは（コードを管理するのをより困難にする）事を過度に複雑化しているのです。

Answer 1

私の意見では、親コンポーネントで検証されているかどうかにかかわらず、すべてのコンポーネントでpropTypesを検証する必要があります。コンポーネントが小道具を使用する場合、小道具のタイプを検証する必要があります

Reactの主な利点の1つは、コンポーネント再利用性です。たとえあなたの場合でも、Scoreは現時点でHeaderによってのみ使用されている可能性があります。Scoreが他のソースからscoreになっている場合は、正しいタイプを受け取るようにしてください。

プロダクションでのこれらの検証の重複からバンドルされたサイズが懸念される場合は、そのためにbable pluginがあります。

Answer 2

PropTypes kindは、コンポーネントが期待するプロパティとタイプを定義します。スコアコンポーネントは、の場合はを別の場所で再利用できるプレゼンテーションコンポーネントであるため、親コンポーネントと子コンポーネントで定義することは実際には冗長ではありません。

このように、Scoreコンポーネントが期待されるプロパティを受け取っていることを確認することは、実際には良い習慣です。また、コンポーネントが外部データに対して持つ「依存性」も認識します。