第3章 JSX

3.1 JSXの基本規則

単一ルート

return (
  <>
    <Header />
    <Main />
  </>
);

式の埋め込み

const name = "React";
return <h1>{name}</h1>;

{}内には式を記述できるが、if文やfor文そのものは書けない。

const label = isAdmin ? "管理者" : "一般";
return <p>{label}</p>;

3.2 属性

<button
  type="button"
  aria-pressed={selected}
  disabled={isSaving}
>
  保存
</button>

boolean属性はboolean値として渡す。

3.3 スタイル

<div
  style={{
    display: "grid",
    gap: 8,
    opacity: disabled ? 0.5 : 1,
  }}
/>

styleはオブジェクトであり、プロパティはcamelCaseである。
大規模なスタイル管理ではCSS Modules、CSS-in-JS、ユーティリティCSSなどプロジェクト方針を選ぶ。

3.4 安全な文字列表示

Reactは通常、文字列をエスケープして表示する。

<p>{userInput}</p>

HTML文字列を直接挿入するdangerouslySetInnerHTMLは、信頼できるサニタイズ処理とセットで使う。

<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />

3.5 Fragment

import { Fragment } from "react";

items.map(item => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.description}</dd>
  </Fragment>
));

短縮構文<>...</>にはkeyを付けられないため、必要な場合はFragmentを明示する。

---