상위 및 하위 구성 요소의 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, 
}; 

당신이 두 개의 하위 구성 요소 <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, 
}; 

그래서 동일한 소품을 두 번 확인하는 것이 중복됩니까? 그리고 이것은 단지 코드를 관리하기가 더 어렵게 만드는 것입니다.

Answer 1

제 생각에는 부모 구성 요소의 유효성 검사 여부와 관계없이 모든 구성 요소에 propTypes의 유효성을 검사해야합니다. 다음과 같이 생각하십시오 : 구성 요소가 소품을 사용하는 경우,

의 주요 장점 중 하나는 구성 요소 재사용입니다. 심지어 당신의 경우에 Score은 현재 Header에 의해서만 사용될 수 있습니다. 나중에 다른 곳에서 유용하게 사용하고 Score이 다른 출처에서 score이 나오면 정확한 유형을 받아야합니다.

프로덕션 환경에서 이러한 proptype 유효성 검사의 중복으로 인해 번들 크기가 걱정되는 경우이를 돕는 bable plugin이 있습니다.

Answer 2

PropTypes kind는 구성 요소가 예상하는 등록 정보 및 유형을 정의합니다. 부모 컴포넌트와 하위 컴포넌트에서 정의하는 것은 실제로 중복되지 않습니다. 이유는 스코어 컴포넌트가 이 필요하다면 다른 곳으로 재사용 될 수있는 프리젠 테이션 구성 요소이기 때문입니다..

따라서 Score 구성 요소가 예상되는 속성을 수신하는지 확인하는 것이 좋습니다. 또한 구성 요소가 외부 데이터에 대해 갖는 '종속성'을 알 수 있습니다.