使用 JSX 扩展属性覆盖 JSX 属性

Posted 2023-02-22

【中文标题】使用 JSX 扩展属性覆盖 JSX 属性

【英文标题】：Overriding JSX attributes with JSX spread attributes

【发布时间】：2020-02-22 04:54:35

【问题描述】：

JSX 不允许多次指定一个属性。

F.ex.

<Component prop1="a" prop1="b" />        /* <- This is not allowed */

我想知道如果一个属性被显式指定一次会发生什么，但另外，另一个包含相同属性的扩展属性被传递给组件：

<Component prop1="a" ...obj />         /* where obj contains an attribute called "prop1" */

属性的顺序很重要吗？例如。第二个属性会覆盖第一个吗？

【问题讨论】：

何不试试呢？是的，后面的属性会覆盖前面的属性

@AndyRay 错了！将返回第一个定义的属性。

【参考方案1】：

第二个出现的道具将覆盖第一个。

在这种情况下，prop1 将是 "b"。

例如：

const obj = prop1: 'b' ;
return (<Component prop1="a" ...obj />);

这遵循对象传播的工作原理。

MDN Spread Syntax

例如：

const a =  prop1: 'a' ;
const b =  prop1: 'b' ;
const c =  ...a, ...b ;

对象c 将具有prop1 的"b"，因为对象b 在第二次传播。

例如：Code Sandbox

编辑：有关来自 react 的其他证明和文档：Spread attributes in react

【讨论】：

@BhojendraRauniyar 这是使用反应和对象传播。我认为即使是直接使用 html，第一个也不会优先。请参阅代码沙箱以获取证明。

@BhojendraRauniyar 这不是真的。他的例子与我制作的和你分叉的第一个沙盒相匹配。你的不符合他让 obj 有一个名为 prop1 的属性的例子。

他害怕了。感谢您的支持