React の折りたたみ可能なコンテンツ | Web 開発チュートリアル

はじめに

この実験では、useStateフックを使って React で折りたたみ可能なコンテンツコンポーネントを作成する方法を探ります。このコンポーネントを使うと、ボタンをクリックすることでコンテンツの表示を切り替えることができ、Web ページ上の情報の整理と提示に役立つツールになります。この実験が終わるとき、Web アプリケーションのアクセシビリティとユーザーエクスペリエンスを向上させるための、React で再利用可能なコンポーネントを作成する方法をより深く理解しているでしょう。

折りたたみ可能なコンテンツ

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加する必要があります。

この関数は、コンテンツの表示を切り替えるボタン付きの折りたたみ可能なコンポーネントをレンダリングします。使い方は以下の通りです。

useState()フックを使って、コンテンツが現在折りたたまれているか展開されているかを表すisCollapsedという状態変数を作成します。初期値はcollapsedに設定します。
<button>要素を使ってisCollapsedの状態を切り替え、childrenプロップを通じて渡されたコンテンツを表示/非表示にします。
isCollapsedを使って、コンテンツコンテナにcollapsedまたはexpandedの適切な CSS クラスを適用し、その外見を決定します。
コンテンツコンテナのaria-expanded属性をisCollapsedの状態に基づいて更新し、障害者向けにコンポーネントをアクセス可能にします。

このコンポーネントに必要な CSS コードは以下の通りです。

.collapse-button {
  display: block;
  width: 100%;
}

.collapse-content.collapsed {
  display: none;
}

.collapse-content.expanded {
  display: block;
}

そして JavaScript コードは以下の通りです。

const Collapse = ({ collapsed, children }) => {
  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);

  return (
    <>
      <button
        className="collapse-button"
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? "Show" : "Hide"} content
      </button>
      <div
        className={`collapse-content ${isCollapsed ? "collapsed" : "expanded"}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

このコンポーネントを使うには、折りたたみたいコンテンツを渡して簡単に呼び出します。

ReactDOM.createRoot(document.getElementById("root")).render(
  <Collapse>
    <h1>This is a collapse</h1>
    <p>Hello world!</p>
  </Collapse>
);

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは折りたたみ可能なコンテンツの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

折りたたみ可能な React コンポーネントを作成する

はじめに

折りたたみ可能なコンテンツ

まとめ