コンポーネントにデータを渡す

Question

データをコンポーネントにどのように正確に渡す必要がありますか？

var item = {type: 'Friend', content: { emoji: '', name: 'Tom', distance: '0.25mi'}} 

個別の小道具で各値を渡す必要がありますか？

renderRow(item) { 
    return(
     <FriendItem emoji={item.content.emoji} name={item.content.name} distance={item.content.distance} /> 
    ) 
} 

または、オブジェクト全体を送信してコードをモジュール化する方法はありますか？

renderRow(item) { 
    return(
     <FriendItem item={item} /> 
    ) 
} 

Answer 1

両方の例は完全に有効です。選択肢はあなた次第です。もう少し詳しく説明します。

1. 最初の例では、コンポーネントに渡す予定の内容をより詳細に制御できます。必要なものを正確に見ることができるため、コンポーネントを使用している人にとってより有益です。しかし、欠点は、多くの小道具を持っていると迷惑になることがあります。オプションの小道具があればこのレイアウトも問題になります。

2. この例では、propTypeを使用しない限りオブジェクトが持つ必要のあるキーについて説明します（以下を参照）。しかし、はるかに簡潔です。個人的に私はあなたの場合にこの例を好む。

2を使用しているが、より情報になりたい場合は、propTypeを使用して必要なことをユーザーに説明します。 hereを参照してください。あなたはどのように見えるかの例：あなたは1のように行う場合、また

MyComponent.propTypes = { 
    content: React.PropTypes.shape({ 
    emoji: React.PropTypes.string, 
    name: React.PropTypes.string, 
    distance: React.PropTypes.number 
    }) 
} 

---

）、あなたはあなたの小道具のすべての子キーを渡すために、拡散演算子を使用することができます。これはあなたのコードを2）のように短くしますが、1）のようなすべての小道具を提供します。あなたがこれを使うかどうかはあなた次第ですが、あなたの場合はまだ2）に固執します。スプレッド演算子の例では、（スプレッドオペレータが余分transpilerプラグインを必要とするかもしれない注）次のようになります。

<FriendItem {...content} /> 

Answer 2

子コンポーネントで子要素を検証できるようになると、子要素を1つずつ渡す理由はありません。私は<FriendItem />に小道具を検証することを確認するために

renderRow(item) { 
    return(
     <FriendItem item /> 
    ) 
} 

：ここ

は最短構文です。したがって、私は小道具のアイテムが含まれている必要がある場合は、<FriendItem />の必要な構造を確認することができますかと思います。 Here is how to handle the validation.