用JSX扩展属性覆盖JSX属性

Question

JSX不允许不止一次指定属性。

F.ex。

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

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

<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传播语法

例：

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

对象c将具有prop1 of "b"，因为对象b是在第二阶段传播的。

例：码砂箱

编辑:关于react的更多证据和文档：反应中的扩散属性