我有以下内联样式对象:
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
问题:
缺少immutable.js,在ES6 / ES7中,我如何能够不可变地组合我的内联样式对象?
更新到Brandon请求,这不起作用:
<div className="controls">
<div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
Prev</div>
<div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
Next</div>
</div>
模块构建失败:SyntaxError:
啊哈!这有效!!
<div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev } }> Prev</div>
<div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_next } }> Next</div>
答案 0 :(得分:1)
您可以使用对象扩展运算符:
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 };
答案 1 :(得分:0)
另一种选择是调整您的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.assign的第一个参数。