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對象解構不起作用

回答

相關問題