reactjs - 用 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

第二个的 prop 将覆盖第一个。

在这种情况下，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 在 2nd 传播。

例如:Code Sandbox

编辑:有关 react 的额外证明和文档:Spread attributes in react