JSXにおける中括弧を使ったJavaScript

JSXを使用すると、JavaScriptファイル内にHTMLのようなマークアップを記述でき、レンダリングロジックとコンテンツを同じ場所に保つことができます。時には、そのマークアップ内に少しのJavaScriptロジックを追加したり、動的なプロパティを参照したりしたい場合があります。そのような場合、JSX内で中括弧を使用してJavaScriptへの窓を開くことができます。

引用符を使った文字列の渡し方

JSXに文字列属性を渡したい場合は、シングルクォートまたはダブルクォートで囲みます：

ここでは、"https://i.imgur.com/7vQD0fPs.jpg"と"Gregorio Y. Zara"が文字列として渡されています。

しかし、srcやaltテキストを動的に指定したい場合はどうでしょうか？JavaScriptの値を使用するには、"と"を{と}に置き換えます：

画像を丸くするCSSクラス名className="avatar"を指定する場合と、JavaScript変数"avatar"の値を読み取るsrc={avatar}の違いに注目してください。中括弧を使用することで、マークアップ内で直接JavaScriptを扱えるようになるからです！

中括弧の使用：JavaScript世界への窓

JSXはJavaScriptを記述する特別な方法です。つまり、中括弧{ }を使って、その中でJavaScriptを使用することが可能です。以下の例では、まず科学者の名前nameを宣言し、次に中括弧で囲んで<h1>タグ内に埋め込んでいます：

名前の値をnameから'Gregorio Y. Zara'に変更してみてください

中括弧の間には、formatDate()のような関数呼び出しを含む、任意のJavaScript式が機能します：

中括弧を使用する場所

JSX内で中括弧を使用できるのは、次の2つの方法のみです：

1. テキストとしてJSXタグ内に直接記述する：<h1>{name}'s To Do List</h1>は機能しますが、<{tag}>Gregorio Y. Zara's To Do List</{tag}>は機能しません。
2. 属性として、=記号の直後に記述する：src={avatar}はavatar変数を読み取りますが、src="{avatar}"は文字列"{avatar}"を渡します。

「二重中括弧」の使用：JSXにおけるCSSとその他のオブジェクト

文字列、数値、その他のJavaScript式に加えて、JSXではオブジェクトも渡すことができます。オブジェクトも中括弧で表されます（例：{ name: "Hedy Lamarr", inventions: 5 }）。したがって、JSXでJSオブジェクトを渡すには、オブジェクトをもう一組の中括弧で囲む必要があります：person={{ name: "Hedy Lamarr", inventions: 5 }}。

これはJSXのインラインCSSスタイルで見かけることがあります。Reactではインラインスタイルを使用する必要はありません（ほとんどの場合、CSSクラスが適しています）。しかし、インラインスタイルが必要な場合は、オブジェクトをstyle属性に渡します：

backgroundColor

{{}}

personnametheme

person

• =
• {{}}