JSX（React）では中括弧はどういう意味ですか？例えば

Question

、あなたが2番目のコードスニペットでは、CSSの周りの中括弧が必要なのはなぜあなたは

var css = {color: red}

と

<h1 style={css}>Hello world</h1>

を行うことができます反応にスタイルを設定するには？

Answer 1

変数の値を "html"（レンダリング部分内）に使用する場合は、中括弧を使用します。これは、変数の値を取って、それを単語にするのではなく、アプリケーションに置くという単なる方法です。

Answer 2

中括弧はJSXパーサに、文字列ではなくJavaScriptの間の内容を解釈する必要があることを知らせる特殊な構文です。

JSX内の変数または参照のようなJavaScript式を使用する場合に必要です。

var css = { color: red }

<h1 style="css">Hello world</h1>

JSXがあなたの代わりに、文字列のスタイル属性で変数cssを使用することを意味知っていない：あなたがそうのような標準的な二重引用符の構文を使用している場合ので。 css変数の中に中括弧を置くことによって、パーサに "css変数の内容を取得してここに入れる"と伝えます。 （技術的に内容を評価する）

このプロセスは一般に「補間」と呼ばれます。

Answer 3

あなたは変数cssを使用しない場合は、JSXは次のようになります。

<h1 style={ {color: 'red'} }>Hello world</h1>

私はあなたが二重の中括弧について混乱していると思います。

JSXの中括弧はprocessing in a JavaScript wayを意味するので、外側の中括弧はこの目的のために正確に使用されています。

ただし、styleプロパティはobjectを受け入れます。オブジェクトには、もう一組の中括弧も必要です。それが内側のものの目的です。