javascript - 将数据传递给组件

Question

我到底应该如何将数据传递到我的组件？

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

我应该尝试使用单独的 prop 传递每个值吗？

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. 您的第一个示例使您可以更好地控制希望传递给组件的内容。对于使用您的组件的人来说，它提供了更多信息，因为他们可以准确地看到需要什么。然而，不利的一面是，如果你有很多 Prop ，它可能会变得烦人。如果您有可选的 Prop ，这种布局也会出现问题。

2. 此示例使您对期望的控制较少(除非您使用 propTypes，并描述对象应具有的键 - 见下文)，但更加简洁。就您个人而言，我更喜欢这个例子。

如果您使用 2，但想要获得更多信息，请使用 propTypes 向用户解释需要什么。请参阅here 。您的示例可能如下:

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

<小时/>

此外，如果您喜欢 1)，您可以使用扩展运算符将每个子键传递给您的 prop。这使您的代码像 2) 一样简短，但提供了像 1) 一样的每个属性。是否使用这个取决于你，但就你的情况我仍然会坚持使用 2)。扩展运算符示例如下所示(注意扩展运算符可能需要额外的转译器插件):

<FriendItem {...content} />