es6对象解构不起作用

我想分配样式给一个对象。最初的代码是es6对象解构不起作用

targetEl.style.top = `${top}px` ; 
targetEl.style.display = 'block'; 
targetEl.style.background = `url(${this.props.imgSrc}) no-repeat`; 
targetEl.style.backgroundSize = "1800px 900px";

我试图用ES6解构和改写这样的代码：

targetEl.style = {...targetEl.style, 
         top:`${top}px`, 
         display: 'block', 
         background: `url(${this.props.imgSrc}) no-repeat`, 
         backgroundSize: "1800px 900px" };

但由于某种原因，它似乎并没有工作。我究竟做错了什么？

来源

2017-11-25 Sooraj Chandran

怀疑你可以覆盖整体e风格对象。你试图解决什么更高水平的问题？ – charlietfl

.style是只读的。也许'Object.assign（targetEl.style，{top：'$ {top} px'}）'。此外，它的类型不是对象 – Slai

它不是对象解构。 –

你没有使用解构，你正在使用实验性扩展语法创建一个新的对象的对象字面值。在使用不可变数据框架时，您可能会习惯这种方式，但在此您确实需要分配targetEl.styleCSS declaration object的属性。你不想用替换整个.style对象一个新的。

尝试Object.assign用平凡文字：

Object.assign(targetEl.style, { 
    top: `${top}px`, 
    display: 'block', 
    background: `url(${this.props.imgSrc}) no-repeat`, 
    backgroundSize: '1800px 900px' 
});

来源

2017-11-25 15:10:27 Bergi

作为一个侧面说明，它是多一点效率不Object.assign：

const s = targetEl.style; 
s.top = `${top}px`; 
s.display = 'block'; 
s.background = `url(${this.props.imgSrc}) no-repeat`; 
s.backgroundSize = '1800px 900px';

但更高效的分配一次全部（How can I set multiple CSS styles in JavaScript? ）：

targetEl.style.cssText += `; top = ${top}px, display = 'block', 
    background = url(${this.props.imgSrc}) no-repeat, backgroundSize = '1800px 900px'; `;

来源

2017-11-25 15:59:00 Slai

es6对象解构不起作用

回答

相关问题