javascript - JSX 中 props 的顺序重要吗？

Question

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

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

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

换句话说，使用扩展运算符时属性的排序是否重要？

Answer 1

是的。它的工作原理与您的示例完全一样

你的例子被翻译成：

// 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...*/}
/>

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

Answer 2

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

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

</MyComponent>

变成：

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

哪里_extends是 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 source{ foo: "overridden" }覆盖的foofrom o。

Answer 3

看看这个沙盒证明：

https://codesandbox.io/s/Q1GMx9KM9

如您所见，它的行为与您在问题中所理论化的完全一样。

编辑 所以片段：

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.foo}</div>
  }
}

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const o = { foo: 'bar' };

const App = () =>
  <div style={styles}>
    <h2>Spreading after explicit property</h2>
    <MyComponent foo="will be overriden" {...o} />
    <h2>Spreading before explicit property</h2>
    <MyComponent {...o} foo="was overriden" />
  </div>;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>