用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} />);

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

MDN Spread Syntax

例如：

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

对象c的{​​{1}}为prop1，因为对象"b"分布在第二个。

例如：Code Sandbox

编辑：有关来自React的更多证明和文档：Spread attributes in react