web-dev-qa-db-ja.com

JSX（React）の中括弧は何を意味しますか？

たとえば、Reactでスタイルを設定するには、次のようにします。

var css = {color: red}

そして

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

2番目のコードスニペットでcssを中括弧で囲む必要があるのはなぜですか？

javascriptreactjsecmascript-6jsx
27
EverRip

中括弧は、JSXパーサーに、中のコンテンツをストリングではなくJavaScriptとして解釈する必要があることを知らせる特別な構文です。

JSX内の変数や参照などのJavaScript式を使用する場合に必要になります。なぜなら、次のような標準の二重引用符構文を使用すると：

var css = { color: red }

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

JSXは、スタイル属性で文字列の代わりに変数cssを使用するつもりだったことを知りません。また、変数cssを中括弧で囲むことにより、パーサーに「変数cssの内容を取得して、ここに配置する」ように指示しています。 （技術的にはコンテンツの評価）

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

35
Daniel Sandiego

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

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

二重中括弧について混乱していると思います。

jSXの中括弧はprocessing in a JavaScript wayので、外側の中括弧はまさにこの目的に使用されます。

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

14
Chang

変数の値を "html"内（レンダーパーツ内）で使用する場合は、中かっこを付けます。これは、Wordではなく、変数の値を取得してそこに配置するようにアプリに指示する方法にすぎません。

2
adinutzyc21