用 JSX 传播属性覆盖 JSX 属性

Question

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

F.ex.

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

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

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

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

Answer 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

Overriding JSX attributes with JSX spread attributes