使用ReactJS和Tailwind的手风琴模板

手风琴是一种可以以折叠和展开的形式显示数据的组件。在空间有限且只需要向最终用户提供必要信息的地方非常有用。它能够方便地显示数据，因为用户只会看到所需的数据，其他组件都是隐藏的。

最终的效果将如下所示：

手风琴中的基本功能包括

标题： 包含始终显示给用户的信息
内容/数据： 用户选择查看的信息
折叠/展开： 用户可以折叠和展开所选信息的功能
过渡效果： 扩展/折叠过程中的平滑过渡，提升用户体验

先决条件：

ReactJS
Tailwind
React中的props

步骤：

设置一个基本的React项目并安装所需的依赖项。
创建包含导航栏和欢迎幻灯片的基本布局。
使用Tailwind样式化组件。
将数据动态传递给组件并在屏幕上呈现。

创建项目的步骤：

步骤1： 使用以下命令设置项目

 npx create-react-app <<Project_Name>>

步骤2 ：使用命令导航到文件夹

cd <<Project_Name>>

步骤3 ：使用以下命令安装所需的依赖项

npm install -D tailwindcss

步骤4： 使用以下命令创建 tailwind 配置文件：

npx tailwindcss init

步骤5 ：将 tailwind.config.js 文件重写为以下内容

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [  
    "./src/**/*.{js,jsx,ts,tsx}",  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}

步骤6 : 在 src 目录中创建一个名为 components 的文件夹，并添加 Accordion.js 和 Navbar.js

项目结构:

使用ReactJS和Tailwind的手风琴模板

package.json 中更新的依赖项将如下所示：

"dependencies": {  
    "@testing-library/jest-dom": "^5.17.0",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-scripts": "5.0.1",  
    "web-vitals": "^2.1.4"  
  }  
"devDependencies": {  
    "tailwindcss": "^3.3.3"  
  }

示例: 在相应的文件中添加以下代码:

// App.js 
  
import logo from './logo.svg'; 
import './App.css'; 
import Accordion from './components/Accordion'; 
import { useState } from 'react'; 
import Navbar from './components/Navbar'; 
  
const App = () => { 
    const [accordions, setAccordion] = useState([ 
        { 
            key: 1, 
            title: 'What is GeeksforGeeks?', 
            data: `GeeksforGeeks is a one stop solution  
                      for all computer science students.`, 
            isOpen: false
        }, 
        { 
            key: 2, 
            title: 'What GeeksforGeeks offer us?', 
            data: `GeeksforGeeks offers Free Tutorials,  
                      Millions of Articles, Live, Online and  
                      Classroom Courses,Frequent Coding Competitions,  
                      Webinars by Industry Experts, Internship  
                      opportunities and Job Opportunities.`, 
            isOpen: false
        }, 
        { 
            key: 3, 
            title: 'Which is the best portal to study Computer Science?', 
            data: `GeeksforGeeks is the best Computer Science portal  
                      for geeks. It contains well written, well thought  
                      and well explained computer science and programming  
                      articles.`, 
            isOpen: false
        }, 
    ]); 
  
    const toggleAccordion = (accordionkey) => { 
        const updatedAccordions = accordions.map((accord) => { 
            if (accord.key === accordionkey) { 
                return { ...accord, isOpen: !accord.isOpen }; 
            } else { 
                return { ...accord, isOpen: false }; 
            } 
        }); 
  
        setAccordion(updatedAccordions); 
    }; 
  
    return ( 
        <div> 
            <Navbar/> 
            <div className="p-2 m-8"> 
                <h2 className='text-2xl mb-2 mx-auto text-green-800'>Accordion Using React and Tailwind</h2> 
                {accordions.map((accordion) => ( 
                    <Accordion 
                        key={accordion.key} 
                        title={accordion.title} 
                        data={accordion.data} 
                        isOpen={accordion.isOpen} 
                        toggleAccordion={() => toggleAccordion(accordion.key)} 
                    /> 
                ))} 
            </div> 
        </div> 
    ); 
}; 
  
export default App;

Accordion.js

// Accordion.js 
  
export default function Accordion(props) { 
    return ( 
        <div className="border rounded-md mb-1"> 
            <button 
                className="w-full p-4 text-left bg-gray-200  
                           hover:bg-gray-300 transition duration-300"
                onClick={props.toggleAccordion} 
            > 
                {props.title} 
                <span className={`float-right transform ${props.isOpen ?  
                                 'rotate-180' : 'rotate-0'}  
                                 transition-transform duration-300`}> 
                    &#9660; 
                </span> 
            </button> 
            {props.isOpen && ( 
                <div className="p-4 bg-white"> 
                    {props.data} 
                </div> 
            )} 
        </div> 
    ); 
};

Navbar.js

// Navbar.js 
  
export default function Navbar() { 
    return ( 
        <div> 
            <nav classNameName="bg-white fixed w-full 
                                z-20 top-0 left-0 
                                border-b border-gray-200"> 
                <div className="flex flex-wrap items-center 
                                justify-between mx-auto p-4"> 
                    <a href="https://geeksforgeeks.org/"
                    className="flex items-center"> 
                        <img src= 
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                            className="mr-2"
                            alt="GFG Logo" /> 
                        <span className="self-center text-2xl font-semibold "> 
                            GeeksforGeeks 
                        </span> 
                    </a> 
                    <div className="items-center justify-between hidden 
                                    w-full md:flex md:w-auto md:order-1"
                        id="navbar-sticky"> 
                        <ul className="flex flex-col p-4 
                                    md:p-0 mt-4 font-medium 
                                    border border-gray-100 rounded-lg 
                                    bg-gray-50 md:flex-row md:space-x-8 
                                    md:mt-0 md:border-0 md:bg-white"> 
                            <li> 
                                <a href="#"
                                className="block py-2 pl-3 
                                            pr-4 text-white bg-blue-700 
                                            rounded md:bg-transparent 
                                            md:text-blue-700 md:p-0"> 
                                    Home 
                                </a> 
                            </li> 
                            <li> 
                                <a href="#"
                                className="block py-2 pl-3 
                                            pr-4 text-gray-900 rounded 
                                            hover:bg-gray-100 
                                            md:hover:bg-transparent 
                                            md:hover:text-blue-700 md:p-0"> 
                                    Posts 
                                </a> 
                            </li> 
                            <li> 
                                <a href="#"
                                className="block py-2 pl-3 
                                            pr-4 text-gray-900 rounded 
                                            hover:bg-gray-100 
                                            md:hover:bg-transparent 
                                            md:hover:text-blue-700 md:p-0"> 
                                    About us 
                                </a> 
                            </li> 
                        </ul> 
                    </div> 
                </div> 
            </nav> 
        </div> 
    ) 
}

CSS

/* Index.css */
  
@tailwind base; 
@tailwind components; 
@tailwind utilities; 
  
body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 
    sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
} 
  
code { 
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 
    monospace; 
}

运行该应用的步骤：

步骤 1：在项目目录的终端中输入以下命令