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

【问题标题】：Overriding JSX attributes with JSX spread attributes使用 JSX 扩展属性覆盖 JSX 属性
【发布时间】：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" */

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

【问题讨论】：

【解决方案1】：

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

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

例如：

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

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

例如：

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

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

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

【讨论】：