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。
の内容をクリアします

<code class="language-javascript">import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div classname="App">
      <accordion></accordion>
    </div>
  );
}

export default App;</code>

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

で、

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

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

<code class="language-javascript">import React from 'react';

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

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

export default Accordion;</code>

（

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

<code class="language-javascript">const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;</code>

...インストール

：

インポート

、

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

<code class="language-javascript">import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';</code>

3. CSSスタイリングを追加します（新しいAccordionItemファイルまたは
内）：（提供されたCSSは広範囲です。それをより小さく、より管理しやすいスタイルシートに分割することを検討してください）。

<code class="language-javascript">const AccordionItem = ({ question, answer, isOpen, onClick }) => {
  const contentHeight = useRef();
  return (
    <div classname="wrapper">
      <div classname="{`question-container" : onclick="{onClick}">
        <p classname="question-content">{question}</p>
        <riarrowdropdownline classname="{`arrow" :></riarrowdropdownline>
      </div>
      <div classname="answer-container" ref="{contentHeight}" style="{{" height: isopen contentheight.current.scrollheight :>
        <p classname="answer-content">{answer}</p>
      </div>
    </div>
  );
};</code>

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

<code class="language-javascript">import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div classname="App">
      <accordion></accordion>
    </div>
  );
}

export default App;</code>

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

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