Reactでの要素表示制御 - ShowとHideを使って

Reactアプリケーションを開発していると、特定の条件に基づいて要素を表示したり隠したりする必要に直面します。このプロセスをもっとシンプルでわかりやすくするために、ShowとHideという再利用可能なコンポーネントを作成することができます。これによって、直感的に要素の表示をコントロールできるようになります。

import React, { Fragment } from 'react';

type Visibility = {
  when: boolean;
  children: JSX.Element;
};

const Show: React.FC<Visibility> = ({ when, children }) =>
  when ? children : <Fragment />;

const Hide: React.FC<Visibility> = ({ when, children }) =>
  when ? <Fragment /> : children;

フルスクリーンモードを終了する

コードの構造を分析しましょう：

Visibilityというインタフェースを定義して始めます。このインタフェースは以下の2つのプロパティを持っています：

when: 要素を表示するか(true)または隠すか(false)を示すブーリアン値です。
children: 条件が満たされた場合に表示される内容を表すJSX.Element型のプロパティです。

次に、Showコンポーネントを作成します。このコンポーネントはVisibilityインタフェースのプロパティを分解して受け取る関数です。when条件をチェックして、その条件が真(true)の場合にはchildren内容を返します。それ以外の場合は空のフラグメント(<Fragment />)を返して要素を隠します。
それから、Hideコンポーネントがあります。これはShowの反対の動作をします。whenとchildrenのプロパティも受け取りますが、今回は条件を逆にします。whenが真の場合は空のフラグメントを返して要素を隠し、そうでなければchildren内容を返します。

これらのコンポーネントが定義されたので、Reactプロジェクトのどこでもそれらを使うことができます。どのようにして要素の表示を簡単にコントロールできるかを示すために、使用例を見てみましょう：

import React, { useState } from 'react';

const ExampleComponent: React.FC = () => {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible((prevValue) => !prevValue);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>表示切り替え</button>

      {/* Showコンポーネントを使用 */}
      <Show when={isVisible}>
        <p>isVisibleがtrueの時に表示される内容です。</p>
      </Show>

      {/* Hideコンポーネントを使用 */}
      <Hide when={isVisible}>
        <p>isVisibleがfalseの時に隠される内容です。</p>
      </Hide>
    </div>
  );
};

フルスクリーンモードを終了する

この例では、ExampleComponentというコンポーネントを作成し、その中に内容の表示を切り替えるためのボタンがあります。ボタンをクリックすると、isVisible状態がtrueとfalseとの間で切り替わり、ShowとHideコンポーネントの子要素の表示や隠しを制御します。

このアプローチは、特に複雑なロジックを持つ場合に、コードをもっと読みやすく、再利用可能で理解しやすくします。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/demgoncalves/controle-de-exibicao-de-elementos-no-react-usando-show-e-hide-373k

Reactでの要素表示制御 - ShowとHideを使って

タグ

最新の記事