折りたたみ可能なアコーディオンメニューを実装する | React チュートリアル

はじめに

この実験では、コンポーネントとフックを使用して React で折りたたみ可能なアコーディオンメニューを実装する方法を探ります。この実験の目的は、複数の折りたたみ可能なコンテンツ要素を持つ機能的なアコーディオンメニューを構築する実践的な経験を提供することです。この実験が終了するまでに、React を使用して動的で対話型のユーザーインターフェイスを作成する方法を十分に理解しているようになります。

折りたたみ可能なアコーディオン

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

複数の折りたたみ可能なコンテンツ要素を持つアコーディオンメニューをレンダリングするには、次の手順を辿ることができます。

<button>をレンダリングし、handleClickコールバックを介して親に通知しながらコンポーネントを更新するAccordionItemコンポーネントを定義します。
AccordionItem内のisCollapsedプロップを使用してその外見を決定し、classNameを設定します。
Accordionコンポーネントを定義し、useState()フックを使用してbindIndex状態変数の値をdefaultIndexに初期化します。
関数の名前を識別することで、不必要なノードを除外し、AccordionItem以外のchildrenをフィルタリングします。
収集したノードにArray.prototype.map()を使用して個々の折りたたみ可能な要素をレンダリングします。
AccordionItemの<button>をクリックしたときに実行されるchangeItemを定義します。
changeItemは渡されたコールバックonItemClickを実行し、クリックされた要素に基づいてbindIndexを更新します。

以下はコードです。

.accordion-item.collapsed {
  display: none;
}

.accordion-item.expanded {
  display: block;
}

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

const AccordionItem = ({ label, isCollapsed, handleClick, children }) => {
  return (
    <>
      <button className="accordion-button" onClick={handleClick}>
        {label}
      </button>
      <div
        className={`accordion-item ${isCollapsed ? "collapsed" : "expanded"}`}
        aria-expanded={isCollapsed}
      >
        {children}
      </div>
    </>
  );
};

const Accordion = ({ defaultIndex, onItemClick, children }) => {
  const [bindIndex, setBindIndex] = React.useState(defaultIndex);

  const changeItem = (itemIndex) => {
    if (typeof onItemClick === "function") onItemClick(itemIndex);
    if (itemIndex !== bindIndex) setBindIndex(itemIndex);
  };

  const items = children.filter((item) => item.type.name === "AccordionItem");

  return (
    <>
      {items.map(({ props }) => (
        <AccordionItem
          isCollapsed={bindIndex !== props.index}
          label={props.label}
          handleClick={() => changeItem(props.index)}
          children={props.children}
        />
      ))}
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Accordion defaultIndex="1" onItemClick={console.log}>
    <AccordionItem label="A" index="1">
      Lorem ipsum
    </AccordionItem>
    <AccordionItem label="B" index="2">
      Dolor sit amet
    </AccordionItem>
  </Accordion>
);

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

まとめ

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

折りたたみ可能な React アコーディオンの構築

はじめに

折りたたみ可能なアコーディオン

まとめ