企业官网建设流程全解析

📅 我们继续 50 个小项目挑战！——FAQCollapse组件

仓库地址：https://gitee.com/hhm-hhm/50days50projects.git

构建一个带有动画效果的常见问题（FAQ）折叠面板组件。该组件支持点击展开/收起，并为每个问答项添加了优雅的过渡动画。

🌀 组件目标

• 展示一组常见问题（FAQ）。
• 每个问题可以独立展开与收起。
• 使用 TailwindCSS 快速构建美观的 UI 界面。
• 添加平滑的动画过渡效果提升用户体验。

🔧FAQCollapse.tsx 组件实现

import React, { useState } from 'react' interface FAQItem { id: number question: string answer: string isOpen: boolean } const FAQCollapse: React.FC = () => { const [faqList, setFaqList] = useState<FAQItem[]>([ { id: 1, question: 'What is React?', answer: 'React is a JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture and a virtual DOM for efficient rendering.', isOpen: false, }, { id: 2, question: 'How do I install Tailwind CSS in a Vite + React project?', answer: 'You can install Tailwind CSS by running: `npm install -D tailwindcss postcss autoprefixer`, then `npx tailwindcss init -p`, and configure `tailwind.config.js` and `postcss.config.js` accordingly.', isOpen: false, }, { id: 3, question: 'Why use TypeScript with React?', answer: 'TypeScript adds static typing to JavaScript, helping catch bugs at compile time, improving code maintainability, and providing better autocompletion and refactoring support in IDEs.', isOpen: false, }, { id: 4, question: 'Can I use this FAQ component in a production app?', answer: 'Yes! This component is built with best practices: type safety, proper state management, accessibility considerations, and responsive design using Tailwind CSS.', isOpen: false, }, ]) const toggleOpen = (id: number) => { setFaqList((prev) => prev.map((item) => (item.id === id ? { ...item, isOpen: !item.isOpen } : item)) ) } return ( <div className="m-12 flex flex-col items-center justify-center gap-8 text-white"> <h3 className="font-mono text-2xl font-bold">Frequently Asked Questions</h3> {faqList.map((item) => ( <div key={item.id} className="w-full max-w-2xl overflow-hidden rounded-2xl bg-gray-500 p-8"> <div className="flex cursor-pointer items-start justify-between" onClick={() => toggleOpen(item.id)}> <div className="text-xl font-bold">{item.question}</div> <div className="text-2xl font-bold select-none"> {item.isOpen ? '-' : '+'} </div> </div> {item.isOpen && ( <div className="mt-4 text-xl font-bold transition-all duration-500 ease-in-out"> {item.answer} </div> )} </div> ))} <div className="absolute right-20 bottom-10 text-2xl text-red-500"> CSDN@Hao_Harrision </div> </div> ) } export default FAQCollapse

✅ 关键实现说明

1.状态管理

• 使用useState<FAQItem[]>存储 FAQ 列表。
• 每个FAQItem包含isOpen: boolean字段（通过扩展对象实现）。
• 更新时使用不可变方式：setFaqList(prev => prev.map(...))。

2.折叠切换逻辑

• 点击整个问答标题区域即可切换（提升 UX）。
• toggleOpen(id)只翻转对应项的isOpen状态。

3.动画实现（Tailwind + 条件渲染）

• Vue 的<Transition>在 React 中没有直接等价物。
• 我们采用条件渲染 + Tailwind 过渡类实现展开动画：

  {item.isOpen && <div className="transition-all duration-500 ease-in-out ...">...</div>}

• 虽然无法完全复刻enter-from/leave-to的精细控制，但视觉效果非常接近。
• 若需更复杂动画，可引入framer-motion或react-transition-group，但本场景无需。

4.样式与响应式

• 使用max-w-2xl替代原w-2xl（Tailwind 中w-2xl不是标准类，应为max-w-2xl）。
• 添加select-none防止用户误选+/-符号。
• 整体保持深色文字（text-white），背景为bg-gray-500。

5.内容优化

• 将重复的 “What is Vue.js?” 改为不同问题，避免混淆（你可改回原内容）。

⚠️ 注意事项

• 动画局限性：React 条件渲染在元素“消失”时会立即卸载，因此收起动画无法完全执行。
  如果你希望收起也有动画，需使用height或opacity控制 +onTransitionEnd，或使用第三方库。

  ✅ 但对 FAQ 场景，展开有动画、收起瞬时隐藏是常见且可接受的设计。

• 无障碍（a11y）建议（可选增强）：

  • 为每个问答添加role="button"和aria-expanded。
  • 示例：

    <div role="button" aria-expanded={item.isOpen} tabIndex={0} onKeyDown={(e) => e.key === 'Enter' && toggleOpen(item.id)} >

🎨 TailwindCSS 样式重点讲解

这些类名帮助我们快速构建出一个居中的响应式布局，并确保视觉上的一致性和美观性。

🦌 路由组件 + 常量定义

router/index.tsx中children数组中添加子路由

{ path: '/', element: <App />, children: [ ... { path: '/FAQ', lazy: () => import('@/projects/FAQCollapse.tsx').then((mod) => ({ Component: mod.default, })), }, ], },

constants/index.tsx 添加组件预览常量

import demo12Img from '@/assets/pic-demo/demo-12.png' 省略部分.... export const projectList: ProjectItem[] = [ 省略部分.... { id: 12, title: 'FAQ Collapse', image: demo12Img, link: 'FAQ', }, ]

🚀 小结

涵盖响应式系统、事件监听机制以及TailwindCSS的实用样式类。它不仅是一个教学示例，也可以作为开发调试工具的一部分，用于快速查看键盘事件的数据。

📅 明日预告： 我们将完成RandomChoicePicker组件，一个现代化的标签输入组件🚀

原文链接：https://blog.csdn.net/qq_44808710/article/details/148590104

每天造一个轮子，码力暴涨不是梦！🚀