JSX中道具的排序是否重要？

Question

如果o对象包含一对键/值对:foo: 'bar'我可以依赖这些结果吗？:

// foo will be 'bar'
<MyComponent
    foo='should not override'
    {...o}
  />

// foo will be 'overridden'
<MyComponent
    {...o}
    foo='overridden'
  />

换句话说,使用扩展运算符时属性的排序是否显着？

Answer 1

是的，订购很重要。确切的原因是 Babel 如何转译 JSX。你可以在Babel REPL 中看到：

<MyComponent foo="should not override" {...o}>

</MyComponent>

变成：

React.createElement(MyComponent, _extends({ foo: "overridden" }, o));

Where _extendsis just Object.assign，或者如果浏览器不支持它，_extends在功能上是相同的。根据 MDN 文档：

如果目标对象中的属性具有相同的键，它们将被源中的属性覆盖。较晚来源的属性将类似地覆盖较早的属性。

（重点是我的）。因此，当Object.assign用于将 props 传递给组件时，目标是{ foo: "overridden" }，源是o。由于foo在目标和源中都存在，因此foo在目标中被覆盖。这也适用于：

<MyComponent {...o} foo="overridden">

</MyComponent>

在这里，JSX 被转换为相反的：

React.createElement(MyComponent, _extends({}, o, { foo: "overriden" }));

它有点不同，因为这里的目标是一个空对象，但 MDN 引用的后半部分适用。这里的来源是o和{ foo: "overridden" }。由于foo存在于两个源中，因此fooin 源{ foo: "overridden" }覆盖了foofrom o。

Answer 2

是的。完全按照您的示例所说

您的示例被转换为：

// foo will be 'bar'
<MyComponent
    {/* ...other 'o' keys/values...*/}
    foo='should not override'
    {/* ...other 'o' keys/values...*/}
    foo='bar'
/>

// foo will be 'overridden'
<MyComponent
    foo='bar'
    {/* ...other 'o' keys/values...*/}
    foo='overridden'
    {/* ...other 'o' keys/values...*/}
/>

因此，它总是覆盖最后一个