这是在Reaction中将道具传递给子组件的好方法吗？ [英] Is this a good way to pass props to child component in React?

问题描述

在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)节省了大量时间和打字工作。但是：

1. (2)有什么缺点吗？例如，(2)是否被视为反应反模式？
2. 我知道谈论性能而不进行测量是不好的，但我想知道(2)是否有任何损害性能的问题？

更新1：我在家长的道具中添加了myFoo, myBar, myBaz。请注意，我不想将所有道具传播到子组件，因为这被认为是导致子组件中不必要道具的不良做法。

推荐答案

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

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

这篇关于这是在Reaction中将道具传递给子组件的好方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！