スプレッド属性でネストされたプロパティを正しく渡す方法（JSX）

Question

＃1

こんにちは。私は2つの別々のコンポーネントの代わりに、すべてのコンポーネントのためのnested.propの2 instansesのための1つの変数の参照を取得なぜ

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" 

： 私は、コードを持っていますか？ なぜthis.propsはマウント後にコンポーネントのすべてのinstansに対して最後に設定された値だけを保存するのですか？それは正常な行動ですか？ 私は正しい動作が異なるinstansesの異なるプロパティ値を持っていると思います。

P.S.私はこのコードhereをテストしました。

＃2

jimfb annsweredされています： "You are mutating the default prop that was passed in. The line this.props.nested.prop = this.props.parse.nested.prop; is illegal."

私の次の質問：たとえば How to pass nested properties without a manual mutation of props?

：

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

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

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

ガイドJSX上記のコードに属性の拡張機能はprops.nestedをオーバーライドし、デフォルトのネストされたプロパティは失います。しかし、私はそれが必要ではありません。 JSXスプレッド属性解析の段階で、ネストされたオブジェクトの再帰的なトラバースを実装するのはどうですか？
このケースにはいくつかの有用なパターンがありますか？

Answer 1

これは実際には良い質問です！

短い答え：スプレッド演算子では深くマージできません。浅いマージだけです。 しかし、あなたは確実にオブジェクトを横断して深いマージを行う関数を書くことができます。ただ、深いマージをしない

1）：

これは実際にあなたに3つのオプションを残します。あなたはネストされたプロパティの新しい価値を持つことになりますが、明示的を言って力をマージ

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

浅い：あなたは2レベルのネストされたオブジェクトを持っている場合は、そのような単純なことを行うことができます。あなたのコードを明白にするので、これは良いことです。 実行可能な例hereを試すこともできます。

2）不変構造のライブラリを使用することができます。 F.e. immutable.js。それによって、あなたのコードはかなり似ています。

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）あなたは深いマージを使用することができます：NPMでのいくつかの実装を見つけるか、それを自分 を書いて、あなたは再び不変のようなコードを（持っています。一例として、JS）：

const finalProps = oldProps.mergeDeep(newProps); 

あなたは、いくつかのケースでこれをしたいかもしれませんが、このようなコードは、更新操作暗黙のを作り、それがhere