オブジェクトの中に文字列を追加する方法リテラル

Question

オブジェクトリテラル内に文字列を追加することはできますか？

height: 'calc(100% - ' + String(this.padding) + 'px * 2)'とすると、Chromeから次のエラーメッセージが表示されます。

[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' 
    } 
} 

私は機能としてそれを作る場合は、エラーメッセージは表示されませんが、CSSは動作していないようです。これは、インラインスタイルのシステムでは、それを関数ではなく変数として呼び出すためです。

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

高さは'calc(100% - 10px * 2)'であることを作るための最善の方法は何ですか？

Answer 1

を試すことができます。代わりに、グローバルthis、またはコードの現在のスコープ内のthisを参照します。基本的に、あなたはまだそれを定義している間、あなたはその後、そうする必要がありますオブジェクトリテラルのプロパティを使用することはできません。

あなたが適切に参照するには、オブジェクトリテラル内 thisを使用することはできません

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

あなたはコメントで述べたように、あなたがそれを定義しているとして、あなたは文字通りあなたのオブジェクトを参照するためにthisを使用することはできません。この

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

宣言の間に。 JavaScriptのthisが機能範囲として使用されています。

次の例は、問題の解決方法を示しています。 基本的には、関数スコープ内にpaddingを定義し、それをオブジェクトリテラル宣言内で取得します。

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

あなたが行うことができます：

：

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' 
    } 
})(); 

をこれは、次のような夫婦の楽しみJavascriptの技術を使用しています

• はすぐにこれは単一の式で行われ、だけでなく、読んで理解しやすいものされていないだけの利点を持っている数

に文字列'10'を強制するための関数式（IIFE）

unary plus operatorを呼び出しました。

とパディング値がほとんどない新しい仕事で外から渡すことができるように、あなたはそれを修正することができます：

オブジェクトを定義した後、あなたはそれを設定する必要が

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