如何用React.js构建手风琴组件

>本文展示了使用React.js构建动态手风琴组件。 这是一个用户友好的，节省空间的UI元素，非常适合Web和移动应用程序。

>

>先决条件：

• > node.js（可从官方网站下载）
• 基本HTML，CSS和JavaScript知识
• >基本反应
>代码编辑器（推荐的Visual Studio代码）

项目设置：

打开您的终端并导航到所需的目录。
创建一个新的React应用程序：
2. npx create-react-app accordion-component>
安装后，您会看到一条确认消息。
3. 文件夹包含所有必要的文件。/accordion-component/>

项目结构和初始设置：>

>打开代码编辑器中的文件夹。
1. /accordion-component/>使用
（来自终端）在浏览器中启动React应用程序。。
2. 创建一个npm run start文件夹。在内部，创建
（对于组件）和（用于数据存储）。
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

在>中，创建component：>

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;

> ...

> install

：

import

，
1. 和react-iconsinnpm install react-icons：
>
2. useState useRef RiArrowDropDownLine实现Accordion.js组件：

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

3. AccordionItem添加CSS样式（在新的
中或

中）：（提供的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. 实现MAIMAccordion.css组件：App.css

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中文网其他相关文章！