开发者问题收集

将数据传递给组件

2017-03-13
58
javascript reactjs react-native

我究竟应该如何将数据传递给我的组件？ 

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} />
    )
}
2个回答

您的两个示例都完全有效，选择权在您手中。更详细地介绍它们。

  1. 您的第一个示例让您可以更好地控制传递给组件的内容。对于使用您组件的人来说，它更具信息性，因为他们可以准确地看到需要什么。但是，缺点是，如果您有很多道具，它可能会变得烦人。如果您有可选道具，这种布局也会有问题。

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

如果您使用 2，但想要更具信息性，请使用 propTypes 向用户解释所需的内容。请参阅 此处 。您的示例可能如下所示： 

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

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

<FriendItem {...content} />
Matt Way
2017-03-13

一旦您可以在子组件中验证它们，我就看不到逐一传递 props 的理由了。

这是最短的语法： 

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

我肯定会在 <FriendItem /> 中验证 props。因此，如果我想知道 props item 必须包含什么，那么我可以在 <FriendItem /> 中检查所需的结构。 以下是处理验证的方法。

Jordan Enev
2017-03-13