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

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

前提条件：

node.js（公式Webサイトからダウンロード可能）

• 基本的なHTML、CSS、およびJavaScriptの知識
• 基本的なReact.jsの理解
• コードエディター（Visual Studio Codeの推奨）

プロジェクトのセットアップ：

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

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

プロジェクト構造と初期セットアップ：

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

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

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

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

export default App;

アコーディオンコンポーネント構造：
5. App.css index.css
in

で、

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

1. Accordion.js：AccordionItemでデータ配列を作成します

import React from 'react';

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

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

export default Accordion;

（

を実際の質問と回答テキストに置き換えます。）
2. AccordionData.js
コンポーネントのレイアウトとスタイリング：

const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;

...インストール

：

インポート

、

、および
1. inreact-icons：npm install react-icons
2. useState useRef RiArrowDropDownLineコンポーネントを実装してください：Accordion.js

import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';

3. CSSスタイリングを追加します（新しいAccordionItemファイルまたは
内）：（提供された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>
  );
};

メイン
4. コンポーネントを実装してください：

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 サイトの他の関連記事を参照してください。