各大网站推广平台网站怎么做才会有收录

各大网站推广平台,网站怎么做才会有收录,推广网站可以做跳转吗,石家庄seo推广优化#x1f4c5; 我们继续 50 个小项目挑战#xff01;—— FAQCollapse组件 仓库地址#xff1a;https://gitee.com/hhm-hhm/50days50projects.git 构建一个带有动画效果的常见问题#xff08;FAQ#xff09;折叠面板组件。该组件支持点击展开/收起#xff0c;并为每个问答… 我们继续 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] useStateFAQItem[]([ { 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 classNamem-12 flex flex-col items-center justify-center gap-8 text-white h3 classNamefont-mono text-2xl font-boldFrequently Asked Questions/h3 {faqList.map((item) ( div key{item.id} classNamew-full max-w-2xl overflow-hidden rounded-2xl bg-gray-500 p-8 div classNameflex cursor-pointer items-start justify-between onClick{() toggleOpen(item.id)} div classNametext-xl font-bold{item.question}/div div classNametext-2xl font-bold select-none {item.isOpen ? - : } /div /div {item.isOpen ( div classNamemt-4 text-xl font-bold transition-all duration-500 ease-in-out {item.answer} /div )} /div ))} div classNameabsolute right-20 bottom-10 text-2xl text-red-500 CSDNHao_Harrision /div /div ) } export default FAQCollapse✅ 关键实现说明1.状态管理使用useStateFAQItem[]存储 FAQ 列表。每个FAQItem包含isOpen: boolean字段通过扩展对象实现。更新时使用不可变方式setFaqList(prev prev.map(...))。2.折叠切换逻辑点击整个问答标题区域即可切换提升 UX。toggleOpen(id)只翻转对应项的isOpen状态。3.动画实现Tailwind 条件渲染Vue 的Transition在 React 中没有直接等价物。我们采用条件渲染 Tailwind 过渡类实现展开动画{item.isOpen div classNametransition-all duration-500 ease-in-out ....../div}虽然无法完全复刻enter-from/leave-to的精细控制但视觉效果非常接近。若需更复杂动画可引入framer-motion或react-transition-group但本场景无需。4.样式与响应式使用max-w-2xl替代原w-2xlTailwind 中w-2xl不是标准类应为max-w-2xl。添加select-none防止用户误选/-符号。整体保持深色文字text-white背景为bg-gray-500。5.内容优化将重复的 “What is Vue.js?” 改为不同问题避免混淆你可改回原内容。⚠️ 注意事项动画局限性React 条件渲染在元素“消失”时会立即卸载因此收起动画无法完全执行。如果你希望收起也有动画需使用height或opacity控制 onTransitionEnd或使用第三方库。✅ 但对 FAQ 场景展开有动画、收起瞬时隐藏是常见且可接受的设计。无障碍a11y建议可选增强为每个问答添加rolebutton和aria-expanded。示例div rolebutton aria-expanded{item.isOpen} tabIndex{0} onKeyDown{(e) e.key Enter toggleOpen(item.id)} TailwindCSS 样式重点讲解 TailwindCSS 样式说明类名作用m-12外边距为 3remflex,flex-col弹性布局并设置为纵向排列items-center,justify-center内容居中对齐gap-8子元素之间间距为 2remtext-white设置文字颜色为白色font-mono使用等宽字体rounded-2xl圆角大小为 1rembg-gray-500设置背景颜色为灰色p-8内边距为 2remcursor-pointer鼠标悬停时变为手型overflow-hidden隐藏超出容器的内容用于动画流畅展示text-xl,text-2xl不同层级的文字大小font-bold加粗字体mt-4上边距为 1rem这些类名帮助我们快速构建出一个居中的响应式布局并确保视觉上的一致性和美观性。 路由组件 常量定义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每天造一个轮子码力暴涨不是梦