javascript - ReactJs - 不可变地组合多个样式对象

Question

我有以下内联样式对象:

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>

模块构建失败:语法错误:

啊哈!!!这行得通!!

 <div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev } }> Prev</div>
 <div style={ { ...simpleCarousel.toggle, ...simpleCarousel.toggle_next } }> Next</div>

Answer 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 };

更多信息:https://github.com/sebmarkbage/ecmascript-rest-spread