Reactでの複数行のJSX式の書き方と使用方法

2024-02-09 20:25 React JSX マルチライン

ブラケット（{}）を使用する方法: JSX内でJavaScriptコードを実行するには、中括弧（{}）内にJavaScriptコードを記述します。複数行のJSX式を書く場合、ブラケットを使用して複数の行に分けることができます。例えば、以下のようになります:
```
const element = (
 <div>
   <h1>Hello, World!</h1>
   <p>This is a multiline JSX expression.</p>
 </div>
);
```
バックスラッシュ（\）を使用する方法: JSXの中で改行を含めたい場合、バックスラッシュ（\）を使用して改行を表現することができます。以下は例です:
```
const element = (
 <div>
   <h1>Hello, World!</h1>\
   <p>This is a multiline JSX expression.</p>\
 </div>
);
```
テンプレート文字列を使用する方法: テンプレート文字列を使用して、複数行のJSX式を記述することもできます。以下は例です:
```
const element = `
 <div>
   <h1>Hello, World!</h1>
   <p>This is a multiline JSX expression.</p>
 </div>
`;
```

これらの方法を使って、複数行のJSX式を記述することができます。ご参考までに、上記のコード例を使ってReactコンポーネントを作成することができます。例えば、以下のようになります:

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a multiline JSX expression.</p>
    </div>
  );
}

以上がReactでの複数行のJSX式の書き方と使用方法です。