Möglichkeiten, String-Hinzufügung in Objekt-Literal zu tun

Question

Kann ich einige Zeichenfolgen in einem Objektliteral hinzufügen?

Chrome gibt mir die folgende Fehlermeldung, wenn ich height: 'calc(100% - ' + String(this.padding) + 'px * 2)' mache.

[ProjectContainer.js:15] Uncaught TypeError: Cannot read property 'padding' of undefined

var styles = { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     textAlign: 'left', 
     padding: 10, 
     height: 'calc(100% - ' + String(this.padding) + 'px * 2)', 
     width: 'calc(100% - 10px * 2)', 
     overflowY: 'scroll' 
    } 
} 

Allerdings, wenn ich es als eine Funktion zu machen, wird keine Fehlermeldung angezeigt, aber die CSS-Arbeit scheint nicht. Dies kann der Fall sein, weil das Inline-Stil-System es nicht als eine Funktion sondern als Variable bezeichnet.

var styles = { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     textAlign: 'left', 
     padding: 10, 
     height: function() {return 'calc(100% - ' + String(this.padding) + 'px * 2)'}, 
     width: 'calc(100% - 10px * 2)', 
     overflowY: 'scroll' 
    } 
} 

Was ist der beste Weg, um die Höhe zu machen 'calc(100% - 10px * 2)' zu sein?

Answer 1

in den Kommentaren erwähnt, Sie nicht this wörtliche zu Ihrem Objekt verweisen können, wie Sie es definieren. Stattdessen wird es sich auf den globalen this oder den this im aktuellen Umfang des Codes beziehen. Grundsätzlich können Sie die Eigenschaften eines Objekts verwenden wörtlichen, während Sie noch es definieren, müssen Sie so danach tun:

var styles = { 
 
    root: { 
 
     display: 'flex', 
 
     flexWrap: 'wrap', 
 
     textAlign: 'left', 
 
     padding: 10, 
 
     height: '',      // Optional 
 
     width: 'calc(100% - 10px * 2)', 
 
     overflowY: 'scroll' 
 
    } 
 
} 
 

 
styles.root.height = 'calc(100% - ' + String(styles.root.padding) + 'px * 2)'; 
 

 
console.log(styles);

Answer 2

können Sie versuchen, diese als

var styles = { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     textAlign: 'left', 
     padding: 10, 

     width: 'calc(100% - 10px * 2)', 
     overflowY: 'scroll' 
    }, 
    init: function() { 
     this.root.height = 'calc(100% - ' + String(this.root.padding) + 'px * 2)'; 
     delete this.init; 
     return this; 
    }, 
}.init() 

Answer 3

Sie nicht this innerhalb eines Objektliteral können einen richtig zu referenzieren während der Deklaration. this in JavaScript wird für den Funktionsumfang verwendet.

Das folgende Beispiel zeigt eine mögliche Lösung für Ihr Problem. Sie definieren padding grundsätzlich in einem Funktionsumfang und rufen sie in Ihrer Objekt-Literaldeklaration ab.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. More info on this here .

function foo() { 
 
this.padding = 10; // declare it only once 
 

 
    var styles = { 
 
    root: { 
 
     display: 'flex', 
 
     flexWrap: 'wrap', 
 
     textAlign: 'left', 
 
     padding: this.padding, 
 
     height: 'calc(100% - ' + String(this.padding) + 'px * 2)', 
 
     width: 'calc(100% - 10px * 2)', 
 
     overflowY: 'scroll' 
 
    } 
 
    }; 
 

 
    console.log(styles.root); 
 

 
}; 
 

 
foo();

Answer 4

Sie könnten tun:

var styles = (function() { 
    var padding = '10'; 
    return { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     textAlign: 'left', 
     padding: +padding, 
     height: 'calc(100% - ' + padding + 'px * 2)', 
     width: 'calc(100% - 10px * 2)', 
     overflowY: 'scroll' 
    } 
})(); 

Dies macht den Einsatz von ein paar Spaß Javascript Techniken wie:

• sofort aufgerufen Funktionsausdruck (IIFE)
• unary plus operator die Zeichenfolge '10' in eine Anzahl

Dies hat den Vorteil, nicht nur getan, in einem einzigen Ausdruck, sondern auch leichter zu zwingen, ist zu lesen und zu verstehen.

und man kann es so ändern, dass die Polsterung Wert fast ohne neue Arbeit von außen weitergegeben werden konnte:

var styles = (function(padding) { 
    var padding = padding ? padding : '10'; 
    return { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     textAlign: 'left', 
     padding: +padding, 
     height: 'calc(100% - ' + padding + 'px * 2)', 
     width: 'calc(100% - 10px * 2)', 
     overflowY: 'scroll' 
    } 
})(padding);