Jak poprawnie przekazać właściwości zagnieżdżone z atrybutami spreadu? (JSX)

Question

# 1

Witam. mam kod:

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" 

Dlaczego mam 1 Zmienna odniesienia dla 2 oddzielnych komponentów zamiast 2 instanses z nested.prop dla każdego komponentu? Dlaczego ten.props zapisuje tylko ostatnią ustawioną wartość dla wszystkich instancji komponentu po zamontowaniu? Czy to normalne zachowanie? Myślę, że prawidłowe zachowanie ma różne wartości właściwości dla różnych instanses.

P.S. Przetestowałem ten kod here.

# 2

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

Moje następne pytanie: How to pass nested properties without a manual mutation of props?

Na przykład:

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

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

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

Przewodnik po powyższym kodzie JSX funkcja atrybutu spread właśnie zastępuje rekordy.nested i tracę domyślne właściwości zagnieżdżone. Ale to nie jest to, czego potrzebuję. W jaki sposób zaimplementować rekurencyjne przechodzenie obiektów zagnieżdżonych na etapie analizowania atrybutów spreadu JSX?
Czy jest jakiś użyteczny wzorzec dla tej sprawy?

Answer 1

To właściwie dobre pytanie!

Krótka odpowiedź: nie można wykonywać głębokiego scalania z operatorem rozprzestrzeniania się - wykonuje on tylko płytkie scalanie. Ale na pewno można pisać funkcje, które będą wykonywać obiekty przechodzące i implementujące głębokie scalanie.

To rzeczywiście pozostawia Państwu 3 opcje:

1) Tylko nie rób głęboki seryjnej. Jeśli masz 2 Poziom zagnieżdżonego obiektu można zrobić taką prostą rzecz:

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

Płytki scalanie siły Ci powiedzieć wyraźnie, że będziesz miał nową wartość własności zagnieżdżonego. Co jest dobre, ponieważ sprawia, że ​​Twój kod jest oczywisty. Można również wypróbować uruchamialne przykłady here.

2) Możesz używać biblioteki dla niezmiennych struktur. F.e. immutable.js. Dzięki niemu twój kod będzie wyglądał bardzo podobnie.

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) Można użyć głęboki seryjnej: znaleźć wdrożenie w KMP lub napisać go samodzielnie i masz kod jak to (znowu niezmienny.js jako przykład):

const finalProps = oldProps.mergeDeep(newProps); 

Można to w niektórych przypadkach, ale taki kod czyni operację aktualizacji niejawna i wznosi się wiele problemów, które są wymienione w znacznym stopniu here