Ist das Bestellen von Requisiten in JSX wichtig?

Question

Wenn das o Objekt enthält ein Schlüssel/Wert-Paar: foo: 'bar' kann ich auf diesen Ergebnissen abhängen ?:

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

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

Mit anderen Worten, die Reihenfolge der Eigenschaften ist bei der Verwendung des spread Betreiber von Bedeutung?

Answer 1

ja, ist es. Es funktioniert genau so, wie Ihr Beispiel sagt

Sie Beispiel in übersetzt:

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

Und deshalb ist es überschreibt immer die letzte

Answer 2

Schauen Sie sich diese Sandbox-Beweis:

https://codesandbox.io/s/Q1GMx9KM9

Wie Sie sehen können, verhält es sich genau so, wie Sie in Ihrer Frage theoretisiert haben.

EDIT SO Snippet:

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>

Answer 3

Ja, Bestellung nicht egal. Der genaue Grund ist, wie Babel den JSX transpiliert. Sie können sehen, in der Babel REPL:

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

</MyComponent> 

Becomes:

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

Wo _extends nur Object.assign ist, oder wenn der Browser nicht unterstützt, _extends ist funktional gleich. Per der MDN-Dokumentation:

Eigenschaften im Zielobjekt wird durch Eigenschaften in den Quellen überschrieben werden, wenn sie den gleichen Schlüssel haben. Die Eigenschaften der späteren Quellen überschreiben in ähnlicher Weise frühere.

(Hervorhebung ist meins). Wenn Object.assign verwendet wird, um Requisiten an die Komponente zu übergeben, ist das Ziel { foo: "overridden" } und die Quelle ist o. Da foo sowohl im Ziel als auch in der Quelle vorhanden ist, wird foo im Ziel überschrieben. Dies gilt auch für:

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

</MyComponent> 

Hier wird die JSX zum gegenüberliegenden transpiled:

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

Es ist ein bisschen anders, weil hier ist das Ziel ein leeres Objekt, aber in der zweiten Hälfte des Zitats von MDN gilt. Die Quellen sind o und { foo: "overridden" }. Da in beiden Quellen foo existiert, überschreibt die foo in Quelle { foo: "overridden" } die foo von o.