es6 Objekt Destrukturierung funktioniert nicht

Question

Ich versuche, Stile zu einem Objekt zuzuordnen. Anfängliche Code war

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

Ich versuchte es6 Destrukturierung zu verwenden und schrieb den Code wie folgt aus:

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

Aber aus irgendeinem Grund scheint es nicht zu funktionieren. Was mache ich falsch?

Answer 1

Sie verwenden keine Destrukturierung, Sie verwenden experimentelle Spreizsyntax in einem Objektliteral, das ein neues Objekt erstellt. Sie könnten daran gewöhnt sein, wenn Sie mit unveränderlichen Daten-Frameworks arbeiten, aber hier möchten Sie wirklich zuweisen Eigenschaften des targetEl.styleCSS declaration object. Sie wollen nicht ersetzen das ganze .style Objekt mit einem neuen.

Versuchen Object.assign mit einem einfachen wörtlichen:

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

Answer 2

Als Randbemerkung, es ist ein bisschen effizienter ohne 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'; 

aber noch effizienter sie alle auf einmal zuweisen (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'; `;