ReactJs 如何创建Accordion

一个叫做手风琴的UI元素使用户能够展开和压缩内容部分。在ReactJS中创建一个手风琴，是为你的在线应用程序添加互动性的一个好方法，并使访问者更容易探索和找到他们需要的信息。

本文将引导你完成在ReactJS中创建一个手风琴所需的步骤，并提供示例代码让你开始。

第1步：设置React项目

要开始，你必须有一个React项目的设置。如果你目前没有一个项目，create-react-app命令可以创建一个新的项目。

npx create-react-app my-app
cd my-app
npm start

这将在 “my-app “目录下创建一个新的项目，并启动一个开发服务器，以便你可以在线预览你的修改。

第2步：创建手风琴组件

在建立了一个基本的React项目后，我们可以为我们的手风琴开发一个新的组件。在项目的src目录下，创建一个名为Accordion.js的新文件

Accordion.js

import React, { useState } from 'react';
function Accordion({ items }) {
   const [activeIndex, setActiveIndex] = useState(-1);
   const handleClick = (index) => {
      setActiveIndex(index === activeIndex ? -1 : index);
   };
   return (
      <div>
         {items.map((item, index) => (
            <div key={item.title}>
               <button onClick={() =>handleClick(index)}>{item.title}</button>
               {index === activeIndex && <p>{item.content}</p>}
            </div>
         ))}
      </div>
   );
}
export default Accordion;

我们正在将React和useState钩子从react包中导入这段代码。

useState钩子允许我们为我们的组件添加状态，在本例中是activeIndex。当按钮被点击时，我们使用setActiveIndex函数来改变状态，并用新的activeIndex重新渲染组件。我们将初始状态设置为-1。

此外，我们通过使用map方法迭代items参数来渲染手风琴项目。

第3步：将手风琴添加到应用程序中

现在我们需要将手风琴组件纳入我们的应用程序，因为我们有了它。Accordion组件将被导入App.js文件，并添加到JJSX中，以完成这一任务。

App. js

import React from 'react';
import Accordion from './Accordion';
const items = [
   {
      title: "Section 1",
      content: "This is the content of section 1"
   },
   {
      title: "Section 2",
      content: "This is the content of section 2"
   },
   {
      title: "Section 3",
      content: "This is the content of section 3"
   }
]
function App() {
   return (
      <div>
         <Accordion items={items} />
      </div>
   );
}
export default App;

第4步：设计手风琴的样式

最后，我们可以对我们的手风琴进行造型，使其看起来更美观。这可以通过在我们的 Accordion.js 代码中导入一个CSS文件并将其插入来实现。

import './Accordion.css';

Accordion.css

/* Accordion.css */
button {
   padding: 8px 20px;
   background-color: #4CAF50;
   color: white;
   border: none;
   cursor: pointer;
   margin-right: 10px;
}
p {
   font-size: 20px;
   margin-top: 20px;
}

这将给我们的手风琴一些基本的样式，比如按钮的手风琴背景是绿色的，白色的文字加上光标变化来表示按钮可以被点击。为了使按钮更有活力，你还可以添加悬停、活动和关注等状态。

/* Accordion.css */
button:hover {
   background-color: #3e8e41;
}
button:active {
   transform: scale(0.95);
}
button:focus {
   outline: none;
}

通过选择关闭所有按钮，用户可以关闭手风琴的每一个元素，使其具有更多的动态功能。此外，你可以包括一个功能，让用户通过点击 “打开所有 “按钮来访问所有的手风琴项目。

为了使用户能够关闭和打开所有的手风琴项目，两个新的按钮，”关闭所有 “和 “打开所有”，以及两个新的事件处理程序，”handleClose All “和 “handleOpen All”，已经被添加到这段代码。

第5步：使手风琴具有响应性

使用CSS媒体查询，我们可以根据屏幕的大小来设计不同的组件，使手风琴具有响应性。例如，当屏幕宽度小于500px时，我们可以改变手风琴内容的字体大小。

/* Accordion.css */
@media screen and (max-width: 500px) {
   p {
      font-size: 16px;
   }
}

我们还可以使用flexbox来使组件在小屏幕上占据其容器的全部宽度。

/* App.css */
.accordion-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

按照这些说明，你的ReactJS应用程序应该有一个反应灵敏、功能齐全的手风琴。这个手风琴可以进一步扩展和改变，以满足你的应用程序的独特要求。但请记住，在用ReactJS构建手风琴时，有各种额外的方法来完成相同的目标。

为了确保活动的手风琴项目在页面刷新后仍然可见，你可能还包括将其保存在本地存储的选项。为了使手风琴在视觉上更加美观，你也可以在手风琴元素打开和关闭时加入动画的功能。

输出

总结

使用所提供的示例代码，你应该能够创建一个基本的手风琴，以后可以根据你的应用程序的具体需要进行增强。请记住，还有很多其他的方法可以使用ReactJS来创建一个手风琴，并达到同样的效果。按照这篇博文的说明，你可以创建一个手风琴，对在你的ReactJS应用程序中组织和显示材料有帮助。