ReactJs - 不可变地组合多个样式对象
ReactJs - Combine multiple style objects immutably
>我有以下内联样式对象:
const simpleCarousel = {
toggle: {
....
},
toggle_prev: {
left: 0
},
toggle_next: {
right: 0
}
};
使用以下标准 CSS 标记:
<div className="toggle, toggle_prev">Prev</div>
<div className="toggle, toggle_next">Next</div>
我想使用内联样式并组合对象:
<div style={ Object.assign(simpleCarousel.toggle, simpleCarousel.toggle_prev) }>
Prev</div>
<div style={ Object.assign(simpleCarousel.toggle, simpleCarousel.toggle_next) }>
Next</div>
但是,现在toggle_prev和toggle_next都共享left:0 & right:0
问题:
除了不可变.js,在 ES6/ES7 中,如何不可变地组合我的内联样式对象?
更新到布兰登请求,这不起作用:
<div className="controls">
<div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
Prev</div>
<div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
Next</div>
</div>
模块构建失败:语法错误:
啊哈!!这行得通!!
<div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev } }> Prev</div>
<div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_next } }> Next</div>
您可以使用对象展开运算符:
const a = { a: 1 };
const b = { b: 2, foo: "foo" };
const c = { foo: "override" };
// { a: 1, b: 2, foo: "override" };
const abc = { ...a, ...b, ...c };
// { a: 10, b: 2, foo: "override" };
const xyz = { ...abc, a: 10 };
更多信息: https://github.com/sebmarkbage/ecmascript-rest-spread
另一种选择是调整你的 Object.assign 调用。它从后续对象中获取属性,并将它们添加到第一个对象中。因此,每次都要提供一个要分配给的新对象,然后:
<div style={ Object.assign({}, simpleCarousel.toggle, simpleCarousel.toggle_prev) }>
Prev</div>
<div style={ Object.assign({}, simpleCarousel.toggle, simpleCarousel.toggle_next) }>
Next</div>
应该做你想做的事。请注意,额外的{}
作为 Object.asassign 的第一个参数。
相关文章:
- 如何提供在javascript中编写对对象的重复访问以设置元素样式的简写
- 使用XPath样式访问Javascript JSON对象属性
- Microsoft JScript运行时错误:无法获取属性'的值;样式':对象为null或未定义
- 动态添加的对象赢得't在javascript中拾取样式
- 设置对象中元素的样式
- 使用CSS将鼠标悬停在子对象上时,删除父对象上的悬停样式
- 使用Javascript对象为具有两个背景图像的DIV设置样式时出现问题
- 在循环遍历对象 HTMLDivElement 时,应用 ChileNode 样式 zindex 在 firefox 和
- IE错误:无法设置属性'的值;样式':对象为null或未定义
- 对象文字数据表中的 Google 可视化样式角色
- 在没有交互的情况下更改对象的样式
- 织物 js 粗斜体不起作用,因为 JSON 中的字体样式对象
- ReactJs - 不可变地组合多个样式对象
- 在样式对象中的每个属性上迭代
- 样式对象和HTML属性
- 将样式对象应用到DOM元素
- Ruby中的JS样式对象引用
- 在IE中使用Dojo创建样式对象时出错
- 在react.js中扩展样式对象
- Javascript 样式对象将复杂的颜色名称转换为 rgb