【React】JSXの{}

JSXの{}について

ReactのJSXでは、波括弧 {} を使用して、JavaScriptの式や変数を埋め込むことができます。これにより、動的なコンテンツを生成したり、JavaScriptのコードを実行したりすることが可能になります。

使用方法

具体的な例を見てみましょう。

import React from 'react';

function MyComponent() {
  const name = 'John';
  const age = 30;
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>The current time is {new Date().toLocaleTimeString()}.</p>
    </div>
  );
}

export default MyComponent;

上記の例では、波括弧 {} を使用して、name 変数や age 変数、new Date().toLocaleTimeString() のような JavaScript の式を JSX 内に埋め込んでいます。これにより、name や age の値や現在の時刻が動的に表示されます。

まとめ

JSX の中では、波括弧 {} 内には任意の JavaScript 式が記述できます。ただし、ブロック文（if 文や for 文など）や変数の宣言（let や const）などの文は直接記述できません。代わりに、関数の呼び出しや式の評価などの JavaScript 式を使用することができます。