小道具を受け取らない反応コンポーネントの扱い

Question

私はテンプレートとして使用したいコンポーネントを持っており、さまざまな値を渡すことができます。ただし、その値が存在しない場合、コンポーネントはCannot read value of undefinedを返します。

コンポーネント：

const Component = ({ value }) => (
    <div> 
     <p>{!value ? '' : value}</p> 
    </div> 
) 

そして異なる値でテンプレートをレンダリングする...私はnull、（または何か他のものをレンダリングするコンポーネントを取得する方法

<Component value={object1.value} /> 
<Component value={object2.value} /> // object2 doesn't exist, so error thrown 

）propsが届いていない場合は？または、より良い解決策がありますか？

Answer 1

質問がどのように提起されたかで、<Componentは問題ではありません。未定義の値I.E.でプロパティにアクセスしようとしています。 object2は定義されていないので、プロパティアクセスをしようとするとjavascriptの参照エラーが発生します。理想的には

<Component value={object2 ? object2.value : null} /> 

あなたはなど、object2、object1確認は、少なくとも空のオブジェクトとしてインスタンス化されると、それらを置き換えることができ作ることになります：あなたはあなたができる提供するものではなくのオフに行くために多くのコンテキストがありません実際の値は、プロパティ参照が行われたときにjavascriptの参照エラーを取得する代わりに、未定義の値を返します。