如何正确传递具有排列属性的嵌套属性?(JSX)
How to pass nested properties with spread attributes correctly? (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个嵌套的.pro实例?为什么this.ops在挂载后只保存组件所有实例的最后设置值?这是正常行为吗?我认为正确的行为是对不同的实例使用不同的属性值。
附言:我在这里测试过这个代码。
#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扩展属性解析阶段,如何实现嵌套对象的递归遍历
或者这种情况下有什么有用的模式吗?
这实际上是一个很好的问题!
简言之:您不能用spread运算符进行深度合并,它只进行浅层合并。但您肯定可以编写函数来遍历对象并实现深度合并。
这实际上给你留下了3个选项:
1) 只是不要进行深度合并。如果你有2级嵌套对象,你可以做这样简单的事情:
const newNested = {...oldProps.nested, ...newProps.nested };
const finalProps = { ...oldProps, nested: newNested };
浅合并强制您明确地说,您将拥有嵌套属性的新值。这是一件好事,因为它使您的代码显而易见。您也可以在这里尝试可运行的示例。
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中找到一些实现或自己编写您将得到这样的代码(再次以immutable.js为例):
const finalProps = oldProps.mergeDeep(newProps);
在某些情况下,您可能需要这样做,但这样的代码使更新操作隐式,并且它会引发许多问题,这些问题在
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 设置嵌套对象属性的更好方法
- 从嵌套函数访问函数属性
- Javascript嵌套函数属性继承
- 访问嵌套 json 对象的属性将返回未定义
- 从嵌套对象属性中获取排除某个值的最高值
- 访问键中包含空格的嵌套属性
- 如何将id数组与带下划线的对象数组嵌套属性进行比较
- 正在检查对象javascript中是否存在嵌套属性
- 传递数量不确定的可能嵌套的对象属性
- 更新JavaScript对象中的嵌套属性
- 搜索具有特定属性集的非嵌套节点
- 如何使用get()获取嵌套的Scope属性
- 使用 jQuery 传递的 Rails 嵌套属性
- 如何迭代json对象的嵌套属性并创建新的数组列表
- 访问嵌套对象中父对象的属性
- HTML5嵌套数据-*用Javascript解析的属性don't返回嵌套对象
- 如何获得"src”;来自多个嵌套iframe源的属性
- Javascript对象/名称空间-如何访问从嵌套函数添加的属性(包括示例)
- 未定义的属性嵌套的 JavaScript 对象