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

一旦你可以在子组件中验证它们，我就没有理由一个接一个地传递道具。

这是最短的语法：

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

我肯定会验证<FriendItem />中的道具。因此，如果我想知道道具项必须包含什么，那么我可以在<FriendItem />中检查所需的结构。 Here is how to handle the validation.

Answer 2

您的两个示例都完全有效，您可以自行选择。更详细地介绍它们。

您的第一个示例可让您更好地控制您希望传递给组件的内容。对于使用您的组件的人来说，它提供了更多信息，因为他们可以准确地看到所需的内容。然而，在不利方面，如果你有很多道具，它会变得很烦人。如果您有可选的道具，这种布局也会出现问题。
这个例子让你对你期望的内容没有多少控制（除非你使用propTypes，并描述对象应具有的键 - 见下文），但更简洁。我个人更喜欢这个例子。

如果您使用2，但希望提供更多信息，请使用propTypes向用户解释所需内容。见here。你可能会看到的一个例子：

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

此外，如果你喜欢1），你可以使用spread运算符将每个子键传递给你的道具。这使你的代码保持简短，如2），但提供每个道具，如1）。你是否使用它取决于你，但在你的情况下，我仍然坚持2）。扩展运算符示例如下所示（注意扩展运算符可能需要额外的转换器插件）：

<FriendItem {...content} />

将数据传递给组件

2 个答案: