ReactのJSX記法についてまとめてみる

JSXとは

Reactで使用する構文。

データの表示

{}で囲むことによって変数を扱える

return (
  <h1>
    {user.name}
  </h1>
);

属性の中にも使える

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

条件付きレンダー

<div>
  {変数(bool) ? (
    < trueだった時のコンポーネント />
  ) : (
    < falseだった時のコンポーネント />
  )}
</div>

// 使用例
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

まず{}を書き、
条件とする変数を書く。
?を記載。
()で表示したいコンポーネントを記載。
:でもってelseの場合のコンポーネントも書く。

else節が不要な場合

<div>
  {変数(bool) && <trueだった時のコンポーネント />}
</div>

// 使用例
<div>
  {isLoggedIn && <AdminPanel />}
</div>

ループ処理

const listItems = リストの変数.map(x =>
  <li key={x.id}>
    {x.title}
  </li>
);

// 使用例
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

辞書オブジェクトをループする場合

Object.keys(辞書オブジェクト).map((k: string)=>{
    console.log(`key: ${k}, val: ${辞書オブジェクト[k]}`)
})