Как правильно передать вложенные свойства с атрибутами распространения? (JSX)

# 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"

Почему я получаю 1 ссылку на переменную для 2 отдельных компонентов вместо 2 экземпляров nested.prop для каждого компонента? Почему this.props сохраняет только последнее установленное значение для всех экземпляров компонента после монтирования? Это нормальное поведение? Я думаю, что правильное поведение имеет разные значения свойств для разных экземпляров.

Постскриптум Я проверил этот код здесь.

# 2

jimfb получил ответ: "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?
Или есть какой-то полезный шаблон для этого случая?

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')) )

Ответ 1