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

Question

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

例如：

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

我在想，如果一个属性被显式地指定了一次，但是另一个包含相同属性的展开属性也被传递给组件，会发生什么：

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

属性的顺序是否重要？例如，第二个属性会覆盖第一个属性吗？

- j3141592653589793238

---

为什么不试一下呢？是的，后面的属性会覆盖前面的。 - Andy Ray

@AndyRay 这是错误的！首先定义的属性将被返回。 - Bhojendra Rauniyar

Answer 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 将具有"b"的 prop1 ，因为对象 b 在第二个位置展开了。

例如：Code Sandbox

编辑：有关来自React的其他证明和文档：在React中展开属性

- Special Character

---

@BhojendraRauniyar 这是使用React和对象扩展。我认为即使是纯HTML，第一个也不会优先考虑。请参考代码沙箱以获取证明。 - Special Character

@BhojendraRauniyar那不是真的。他的例子与我制作并由您fork的第一个沙箱相匹配。你的示例并不符合他的要求，即obj具有名为prop1的属性。 - Special Character

他感到害怕了。不过还是谢谢你的支持。 - j3141592653589793238