通常，在React中，我们通过以下方式将props传递给子组件：
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）节省了大量时间和打字工作。然而：
更新1：我添加myFoo, myBar, myBaz了家长的道具。请注意，我不想将所有道具散布到Child组件中，因为这被认为是不良做法，导致在Child组件中产生不必要的道具。
唯一的缺点是，有时很难理解，通过使用方法一，您使代码更具可读性和明确性。当然，如果您有关于组件的某种文档，例如故事书或可以帮助其他开发人员理解组件所需道具的东西，那么使用第二种方法（道具传播）并没有关系，可读性强，您应该坚持使用第一个道具（逐一声明每个道具）。
检查此eslint-react-plugin规则https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md，它总结了为什么最好使用第一个方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句