どのように設定するオブジェクトタイプのデフォルトの小道具に反応する

Question

私たちはすでに知っている、どのようにdefaultPropsを設定する。

TestComponent.defaultProps = { 
    isTest: true 
}; 

しかし、私はしばしばオブジェクトタイプとして小道具を使用しました。子コンポーネントで

親で

、

render(){ 
    let sample = { 
     isTest : true, 
     isLoggedIn : true 
    } 
    return (
     <div> 
      <TestComponent sample = {sample} /> 
     </div> 
    ) 
} 

、私はデフォルトとしてfalseにisLoggedInを設定します。設定されていない（または親から渡されていない）場合はisLoggedIn、デフォルト値はtrue

があるしかし、私はobject type

TestComponent.defaultProps = { 
    sample : { 
     isLoggedIn: false 
    } 
}; 

ためdefaultPropsを設定する方法がわからない、これをどのように行うには？

Answer 1

あなたのコード

TestComponent.defaultProps = { 
    sample : { 
    isLoggedIn: false 
    } 
}; 

が動作するはずです。

そしてタイプの検証（propTypes）については、このようなネストされたオブジェクトの小道具のためReact.PropTypes.shapeを使用します。

React.PropTypes.shape({ 
    isLoggedIn: React.PropTypes.bool 
}) 

ドキュメントを参照してください：https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

Answer 2

私はこのための回避策を見出した：

コンポーネント宣言の前に、デフォルトの小道具を宣言します。 renderメソッドでpropが提供されているかどうかを確認しますか？そうでない場合は、defaultpropsに置き換えます。ここで

は実施例である：

imports........... 

const defaultProps: { 
    sample: { 
     isLoggedIn: false 
     //you can have any number of props here 
    } 
} 

class MyClass extends Component { 
    render() { 
     Object.entries(defaultProps).map(prop => this.props.sample[prop[0]] = this.props.sample[prop[0]] ? this.props.sample[prop[0]] : defaultProps[prop[0]]); 
     return (
      <div> 
       ........... 
      </div> 
     ); 
    } 
} 

export default class MyClass;