Zenn
Open5

React Document

React
cordeliacordelia

条件付きレンダリング

条件によって使用するコンポーネントを切り替えることができる。

ログイン済みかそうでないかでコンポーネントを切り替える

if-elseを使う場合

let content;
if (isLoggedIn) {
  content = <UserHome />;
} else {
  content = <LoginPage />;
}

return (
  <div>
    {content}
  </div>
);

三項演算子を使う場合

<div>
  {isLoggedIn ? <UserHome /> : <LoginPage />}
</div>

else処理が必要ない場合

<div>
  {isLoggedIn && <UserHome /> }
</div>
cordeliacordelia

リスト要素のレンダリング

ポイント

  • 連続したデータ（オブジェクト）を表示する場合は for や map() を使うのが基本。
  • <li> などの要素には key 属性を付ける。これはオブジェクトのIDなどを使う。
  • 表示したいオブジェクトに boolean やそのデータを表現するカテゴリなどの属性を持たせればそれを判定基準にして個別スタイリングや処理を割り当てられる。
const products = [
  { name: 'Apple', isFruit: true, id: 1 },
  { name: 'Banana', isFruit: true, id: 2 },
  { name: 'Onion', isFruit: false, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.name}
    </li>
  );

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

イベントの処理

ポイント

  • イベントハンドラはコンポーネント内に定義する。
  • イベントハンドラをセットする時は参照を渡すだけ。
function handleClick() {
  alert('クリックしました');
}

return (
  <button onClick={handleClick}>
    クリックしてください
  </button>
);
cordeliacordelia

画面の更新

ポイント

  • useStateなどのHookを使って状態変数を作るのが基本
  • 単なる状態を管理するものではなく、コンポーネントの機能として認識した方が良さそう
  • Hookを定義できるのはコンポーネントの先頭か他のHookの先頭、ループ処理で使いたい時はコンポーネントを別途抽出して使う


ボタンをクリックすると状態が更新される

import { useState } from "react";

export default function Myapp() {
  function MyBtn() {
    const [count, setCount] = useState(0);
    function handleClick() {
      setCount(count + 1);
    }

    return <button onClick={handleClick}>Click{count}</button>;
  }

  return (
    <>
      <MyBtn />
      <MyBtn />
    </>
  );
}
cordeliacordelia

コンポネート間でデータを受け渡す

ポイント

  • 親コンポーネントに状態変数と関数を持たせる
  • 親コンポーネントに状態変数を処理する関数を定義する
  • 子コンポーネントに状態変数とそれを処理する関数を渡す
  • 子コンポーネントは渡された状態変数とそれを処理する関数を実行する


1つの状態を2つのボタンコンポーネントで共有する

import { useState } from "react";

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <MyBtn count={count} onClick={handleClick} />
      <MyBtn count={count} onClick={handleClick} />
    </>
  );
}

function MyBtn({ count, onClick }) {
  return <button onClick={onClick}>count {count} times</button>;
}