在Reaction中，我们通常通过以下方式将道具传递给子组件：

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child foo={foo} bar={bar} baz={baz} /> (1)

目前我想出了一个替代方法：

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child {...{ foo, bar, baz }} /> (2)

IMO，(2)节省了大量时间和打字工作。但是：

推荐答案

它的唯一缺点是有时很难理解，通过使用方法一，您可以使代码更具可读性和显式。当然，如果您有组件的某种文档，如故事书或有助于其他开发人员理解组件需要的道具的文档，使用第二种方法(道具传播)并不重要，但为了使内容可读，您应该坚持第一种方法(逐个声明每个道具)。

检查此eslint-action-plugin规则https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md它总结了为什么使用第一种方法更好。