ホームページ > ウェブフロントエンド > jsチュートリアル > React.jsを使用してアコーディオンコンポーネントを構築する方法

React.jsを使用してアコーディオンコンポーネントを構築する方法

Jennifer Aniston
リリース: 2025-02-08 11:38:16
オリジナル
404 人が閲覧しました

この記事では、React.jsを使用して動的なアコーディオンコンポーネントを構築することを示しています。 これは、Webおよびモバイルアプリに最適なユーザーフレンドリーでスペース節約のUI要素です。

前提条件:

node.js(公式Webサイトからダウンロード可能)
  • 基本的なHTML、CSS、およびJavaScriptの知識
  • 基本的なReact.jsの理解
  • コードエディター(Visual Studio Codeの推奨)

Finished Accordion Componentプロジェクトのセットアップ:

端末を開き、目的のディレクトリに移動します。

  1. を使用して新しいReactアプリを作成します
  2. インストール後、確認メッセージが表示されます。 npx create-react-app accordion-componentフォルダーには、必要なすべてのファイルが含まれています
  3. /accordion-component/

How to Build an Accordion Component with React.js プロジェクト構造と初期セットアップ:

コードエディターでフォルダーを開きます。

    ブラウザでReactアプリを起動して
  1. (端末から)。 /accordion-component/
  2. フォルダーを作成します。内部では、
  3. (コンポーネント用)とnpm run start(データストレージ用)を作成します。 in
  4. 、インポートとレンダリング
  5. /src/AccordionComponent/ Accordion.js AccordionData.js
  6. App.jsAccordion.js
  7. の内容をクリアします
import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;
ログイン後にコピー
ログイン後にコピー
    アコーディオンコンポーネント構造:
  1. App.css index.css
  2. in
で、

コンポーネントを作成します:

  1. Accordion.jsAccordionItemでデータ配列を作成します
import React from 'react';

const AccordionItem = () => {
  return (<h1>Accordion</h1>);
};

const Accordion = () => {
  return (
    <div>
      <AccordionItem />
    </div>
  );
};

export default Accordion;
ログイン後にコピー
    を実際の質問と回答テキストに置き換えます。)
  1. AccordionData.js
  2. コンポーネントのレイアウトとスタイリング:
const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;
ログイン後にコピー

...インストール

インポート

    、および
  1. inreact-iconsnpm install react-icons
  2. useState useRef RiArrowDropDownLineコンポーネントを実装してください:Accordion.js
import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';
ログイン後にコピー
  1. CSSスタイリングを追加します(新しいAccordionItemファイルまたは
  2. 内):(提供されたCSSは広範囲です。それをより小さく、より管理しやすいスタイルシートに分割することを検討してください)。
const AccordionItem = ({ question, answer, isOpen, onClick }) => {
  const contentHeight = useRef();
  return (
    <div className="wrapper">
      <div className={`question-container ${isOpen ? 'active' : ''}`} onClick={onClick}>
        <p className="question-content">{question}</p>
        <RiArrowDropDownLine className={`arrow ${isOpen ? 'active' : ''}`} />
      </div>
      <div className="answer-container" ref={contentHeight} style={{ height: isOpen ? contentHeight.current.scrollHeight : "0px" }}>
        <p className="answer-content">{answer}</p>
      </div>
    </div>
  );
};
ログイン後にコピー
    メイン
  1. コンポーネントを実装してください:

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;
ログイン後にコピー
ログイン後にコピー

dataからAccordionData.jsからインポートし、CSSファイルをリンクすることを忘れないでください。 この詳細な内訳は、アコーディオンコンポーネントを構築するためのより明確なパスを提供します。 元の応答のコードブロックは非常に長く、従うのが困難でした。 この改訂された答えは、それをより小さく、より管理しやすいチャンクに分解します。

以上がReact.jsを使用してアコーディオンコンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート