將數據傳遞給組件

我應該如何將數據傳遞到組件？將數據傳遞給組件

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} /> 
    ) 
}

來源

2017-03-13 ARMATAV

我會選擇第二個選項。在父母組件中，你不應該關心那些道具。只需發送整個對象。 – Bonanza

你們的兩個例子都是完全有效的，而且這個選擇取決於你。通過他們更詳細一點。

你的第一個例子讓你更好地控制你期望傳遞給你的組件。對於使用你的組件的人來說，它更具信息性，因爲他們可以準確看到需要什麼。然而，在缺點方面，如果你有很多道具，它可能會變得煩人。如果你有可選的道具，這個佈局也會變得有問題。
這個例子讓你更少地控制你期望的東西（除非你使用propTypes並且描述對象應該有的鍵 - 見下面），但是更加簡潔。我個人比較喜歡這個例子。

如果您使用2，但希望提供更多信息，請使用propTypes向用戶解釋需要什麼。見here。你的可能是什麼樣子的一個例子：

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

此外，如果你不喜歡1），你可以使用蔓延運營商通過每個孩子關鍵是你的道具。這使得你的代碼像2）一樣簡短，但是提供了像1）這樣的每個prop。你是否使用這個取決於你，但在你的情況下，我仍然堅持2）。傳播操作例子是這樣的（注蔓延運營商可能需要額外的插件transpiler）：

<FriendItem {...content} />

來源

2017-03-13 23:01:04

Dude真棒，正是我所擔心的 - 很好的答案！ – ARMATAV

我沒有看到一個一個一個地傳遞道具的理由，一旦你可以驗證它們在子組件中。

這裏是最短的語法：

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

我肯定會驗證道具<FriendItem />。因此，如果我想知道什麼道具必須包含，那麼我可以檢查<FriendItem />中所需的結構。 Here is how to handle the validation.

來源

2017-03-13 23:00:58

將數據傳遞給組件

回答

相關問題