在ES6中编写时，在React中使用道具将复杂对象传递给子组件的正确方法是什么？

Question

现在我们有了ES6并且可以使用传播我见过有人写这样的代码：

class Parent extends Component {
  ...
  render() {
    return (
      <UserProfile {...this.props.user} onClick={this.doSomething} />
    )
  }
}

这会将用户模型的每个属性设置为UserProfile组件上的prop。替代方案将是这样的：

<UserProfile user={this.props.user} onClick={this.doSomething} />

其中一种方法是否被认为是更好的做法？我知道我倾向于哪个版本，但我想知道社区是否已经采取过这样或那样的方式。

Answer 1

几乎没有快速输入 -

• 显然，对于不紧密相关的道具，传播效果更好，除了所有道具都归同一个组件所有。复杂对象更适合将紧密耦合/分组属性分组在一起，最好的例子是样式。
• Spread提供最清晰，一目了然，我可以查看propTypes来确定用法。但是，如果你有很多道具，你应该考虑将它们中的一些分组在一起的可能性。
• 组件的目的也有作用。 UserProfile组件非常具体，它意味着需要与该配置文件相关的几个道具。在这种情况下，当数据模型在父组件中容易获得/可构造时，我更喜欢复杂对象。但是，如果你想支持说与外观或行为相关的道具，比如displayLoginHistory等，它们不与数据模型相关联，那么最好使用spread来保持连贯的道具。