在 React 组件中使用扩展语法时顺序是不是重要？

Posted 2023-02-22

【中文标题】在 React 组件中使用扩展语法时顺序是不是重要？

【英文标题】：Does order matter when using spread syntax in React component?在 React 组件中使用扩展语法时顺序是否重要？

【发布时间】：2020-03-19 19:09:38

【问题描述】：

我们在react组件中使用扩展运算符，使用...Input，它也有onChange方法，那么我们自定义的onChange需要写在传播之前还是之后？

当我们使用扩展运算符时，顺序是否重要？方法覆盖是在这里完成的吗？

表示在性能和语法方面正确、有效和首选的写作方式。

<Input type='text' ...input onChange=onChange />

或者

<Input type='text' onChange=onChange ... input /> 

很抱歉将 2 3 个问题混在一起，请不要将其标记为未批准或投票关闭。现在，在 SO 中提出问题的日子变得很困难。哈哈

我也在寻找在 React Component 中的第一位或最后一位写散布项目的一般做法，任何 lint 规则？

【问题讨论】：

我会在传播输入后执行 onChange，因为如果输入也具有 onChange 属性，那么它将覆盖您刚刚放置的 onChange。

是的，这很重要，... input 之后的任何内容都可以覆盖输入内容

【参考方案1】：

...Input 也有 onChange 方法

那么顺序很重要。后一个覆盖前一个。

这是正确有效和首选的写作方式，在条款 性能和语法。

没有性能差异。订单取决于您的需求。如果您想覆盖onChange，请使用：

<Input type='text' onChange=onChange ... input /> 

【讨论】：

我认为你的例子和你的陈述是矛盾的。我想在传播项目函数上覆盖我的自定义函数然后我认为我们需要在 ...Input

之后编写自定义函数

@diEcho 我假设您想覆盖<Input> 中的onChange 函数。如果你想覆盖道具里面的那个，把它放在第一位。最后一个，覆盖前一个。

我想用我自己的 onChange 覆盖 的 onChange 方法，所以显然需要在 ... input 之后写。为什么要覆盖我自己的函数？

@diEcho 我的示例覆盖了 的 onChange 方法。那么矛盾是什么呢？

您的回答代码不会覆盖 input 的 onChange 而是反向执行。 .

【参考方案2】：

是的，这很重要。

<Input type='text' ...input onChange=onChange />

在这种情况下，“input”内部的“onChange”方法将被其外部的“onChange”覆盖。反之亦然。

我认为根据您要覆盖哪一个，您可以将其带入输入中，例如：

input = ...input, onChange
Or
input = onChange, ...input

<Input type='text' ...input  />