如何用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清除
>和

的内容。

<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

在>中，创建component：>

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>

> ...

> install

：

import

，
1. 和react-iconsinnpm 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. AccordionItem添加CSS样式（在新的
中或

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

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