Wie verschachtelte Eigenschaften mit Verteilungsattributen korrekt übergeben werden? (JSX)

Question

# 1

Hallo. Ich habe den Code:

class Component extends React.Component 
{ 
    render() 
    { 
    this.props.nested.prop = this.props.parse.nested.prop; 
    return <div>Component</div>; 
    } 
    componentDidMount() 
    { 
    console.log(this.props.nested.prop); 
    } 
} 
Component.defaultProps = 
{ 
    nested: 
    { 
    prop: "default" 
    } 
}; 

const obj1 = 
{ 
    nested: 
    { 
    prop: "obj1" 
    } 
}; 
const obj2 = 
{ 
    nested: 
    { 
    prop: "obj2" 
    } 
}; 

class Application extends React.Component 
{ 
    render() 
    { 
    return (
    <div> 
     <Component parse={obj1}/> 
     <Component parse={obj2}/> 
    </div> 
    ); 
    } 
} 

React.render(<Application />, document.getElementById('app')); 
//console output: 
//"obj2" 
//"obj2" 

Warum erhalte ich 1 variable Referenz für 2 separate Komponenten anstelle von 2 instanses von nested.prop für jede Komponente? Warum speichert this.props nach der Montage nur den zuletzt eingestellten Wert für alle Instances der Komponente? Ist es ein normales Verhalten? Ich denke, das richtige Verhalten hat verschiedene Eigenschaftswerte für verschiedene Instances.

P.S. Ich habe diesen Code here getestet.

# 2

jimfb hat annswered worden: "You are mutating the default prop that was passed in. The line this.props.nested.prop = this.props.parse.nested.prop; is illegal."

Meine nächste Frage: How to pass nested properties without a manual mutation of props?

Zum Beispiel:

Component.defaultProps = 
{ 
    nested: 
    { 
    prop1: "default", 
    prop2: "default" 
    } 
}; 

const props = 
{ 
    nested: 
    { 
    prop1: "value" 
    } 
}; 

let component = <Component {...props}/>; 

Leitfaden zu dem obigen Code JSX Spread-Attribut-Feature überschreiben Sie einfach props.nested und ich verliere Standard geschachtelte Eigenschaften. Aber ich brauche es nicht. Wie implementiert man ein rekursives Traversing verschachtelter Objekte in der Phase der JSX-Spread-Attribute-Analyse?
Oder gibt es ein nützliches Muster für diesen Fall?

Answer 1

Das ist eigentlich eine gute Frage!

Kurze Antwort: Sie können tiefe Verschmelzung mit Spread-Operator nicht tun - es führt nur flache Merging. Aber Sie können sicherlich eine Funktion schreiben, die Objekte durchquert und tiefe Verschmelzung implementiert.

Diese tatsächlich lässt Sie 3 Möglichkeiten:

1) Nur nicht tief merge tun. Wenn Sie 2-Ebene verschachteltes Objekt haben, können Sie so einfache Sache tun:

const newNested = {...oldProps.nested, ...newProps.nested }; 
const finalProps = { ...oldProps, nested: newNested }; 

Shallow verschmelzenden Kraft Sie ausdrücklich zu sagen, dass Sie neuen Wert von verschachtelter Eigenschaft haben. Was ist eine gute Sache, wie es Ihren Code offensichtlich macht. Sie können auch runnable Beispiele here ausprobieren.

2) Sie können eine Bibliothek für unveränderliche Strukturen verwenden. F. e. immutable.js. Damit wird Ihr Code sehr ähnlich aussehen.

const oldProps = Immutable.fromJS({ 
    nested: 
    { 
    prop1: "OldValue1", 
    prop2: "OldValue2", 
    } 
}); 

const newProps = Immutable.fromJS({ 
    nested: 
    { 
    prop1: "NewValue1", 
    } 
}); 

const finalProps = oldProps.updateIn(['nested'], (oldNested)=> 
    oldNested.merge(newProps.get('nested')) 
) 

3) können Sie tief Druck verwenden: Eine Implementierung in npm finden oder schreiben Sie es sich und Sie erhalten einen Code wie folgt (wieder unveränderlich haben.js als Beispiel):

const finalProps = oldProps.mergeDeep(newProps); 

Sie können dies in einigen Fällen wollen, aber einen solchen Code macht Update-Operation implizite und es erhebt sich eine Menge Probleme, die stark here