React の onClick イベント ハンドラを介してコンポーネントをレンダリングする

この記事では、ユーザーがボタンをクリックするたびにコンポーネントを動的にレンダリングするように React コンポーネントを設定する方法について説明します。

React の onClick イベント ハンドラを介してコンポーネントをレンダリングする

React で Web アプリケーションを構築する場合、ユーザーの入力に基づいてコンポーネントを条件付きでレンダリングしたい場合があります。 これは、ユーザーの入力を状態変数に格納することで可能になります。

Functional React コンポーネントは JSX コードを返します。これにより、状態変数の値に基づいてコンポーネントをレンダリングする (またはレンダリングしない) ことができます。

コンポーネントを条件付きでレンダリングするには、これら 2つの機能と JavaScript 三項演算子を使用できます。

コード：

export default function App() {
  const [showComponent, setShowComponent] = useState(true);
  return (
    <div className="App">
      {showComponent ? <Box /> : ""}
      <button onClick={() => setShowComponent(!showComponent)}>
        Hide and show Box
      </button>
    </div>
  );
}

出力：

ライブデモ

上記のスニペットでは、useState() フックを使用して状態変数 showComponent を true に初期化しました。 また、別の変数 setShowComponent を作成します。これは、状態変数を更新する関数への参照を格納します。

JSX では、showComponent 変数を評価し、true の場合は <Box /> コンポーネントをレンダリングする JavaScript 式を記述しました。 そうでない場合は、空の文字列をレンダリングします。

JSX 内で JavaScript 式を記述するには、それらを中括弧 ({}) で囲む必要があります。

onClick() イベント ハンドラーを設定して、誰かがボタンをクリックするたびに showComponent 状態変数の値を更新します。 状態変数の値を現在の値の反対に設定します。

現時点でtrueの場合、ボックスがレンダリングされます。 ボタンをクリックすると false に設定され、ボックスはレンダリングされなくなります。

<Button> DOM 要素の位置がどのように変化するかに注目してください。 これは、showComponent 変数の値に基づいて、<Box> コンポーネント (高さと幅が固定された div) がレンダリングされる (またはレンダリングされない) ためです。