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