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

我有以下内联样式对象：

const simpleCarousel = {
   toggle: {
     ....
  },
  toggle_prev: {
    left: 0
  },
  toggle_next: {
    right: 0
  }
};

    <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>

  <div className="controls">
    <div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
     Prev</div>
    <div style={ ...simpleCarousel.toggle, ...simpleCarousel.toggle_prev }>
     Next</div>
  </div>

使用以下标准CSS标记：

const simpleCarousel = {
   toggle: {
     ....
  },
  toggle_prev: {
    left: 0
  },
  toggle_next: {
    right: 0
  }
};

    <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>

  <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>

Prev
下一个

您可以使用对象扩展操作符：

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

---

更多信息：

另一个选项是调整您的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的第一个参数。

除非我误解了您，否则这对我不起作用：。。。