\u5E38\u89C1\u95EE\u9898

{faqs.map((faq, index) => ( ))}

) } `,__src__:"registry/default/example/sections/faq.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { AnimatePresence, motion } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"framer-motion"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { ChevronDown } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Card, CardContent, CardHeader, CardTitle } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/card"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"faqs"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" question: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"\u4EC0\u4E48\u662FReact\uFF1F"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" answer:"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React\u662F\u4E00\u4E2A\u7528\u4E8E\u6784\u5EFA\u7528\u6237\u754C\u9762\u7684JavaScript\u5E93\u3002\u5B83\u7531Facebook\u5F00\u53D1\uFF0C\u5E76\u4E8E2013\u5E74\u5F00\u6E90\u3002React\u5141\u8BB8\u5F00\u53D1\u8005\u521B\u5EFA\u5927\u578B\u7684Web\u5E94\u7528\uFF0C\u8FD9\u4E9B\u5E94\u7528\u53EF\u4EE5\u5728\u4E0D\u91CD\u65B0\u52A0\u8F7D\u9875\u9762\u7684\u60C5\u51B5\u4E0B\u6539\u53D8\u6570\u636E\u3002"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" question: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React\u548CVue\u6709\u4EC0\u4E48\u533A\u522B\uFF1F"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" answer:"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React\u548CVue\u90FD\u662F\u6D41\u884C\u7684\u524D\u7AEF\u6846\u67B6\uFF0C\u4F46\u5B83\u4EEC\u6709\u4E00\u4E9B\u5173\u952E\u533A\u522B\u3002React\u4F7F\u7528JSX\uFF0C\u800CVue\u4F7F\u7528\u6A21\u677F\uFF1BReact\u7684\u5B66\u4E60\u66F2\u7EBF\u53EF\u80FD\u66F4\u9661\u5CED\uFF0C\u800CVue\u88AB\u8BA4\u4E3A\u66F4\u5BB9\u6613\u4E0A\u624B\uFF1BReact\u7684\u751F\u6001\u7CFB\u7EDF\u66F4\u5927\uFF0C\u800CVue\u7684\u6587\u6863\u88AB\u8BA4\u4E3A\u66F4\u5168\u9762\u3002\u9009\u62E9\u54EA\u4E2A\u53D6\u51B3\u4E8E\u9879\u76EE\u9700\u6C42\u548C\u4E2A\u4EBA\u504F\u597D\u3002"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" question: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"\u4EC0\u4E48\u662F\u865A\u62DFDOM\uFF1F"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" answer:"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"\u865A\u62DFDOM\uFF08Virtual DOM\uFF09\u662FReact\u7684\u4E00\u4E2A\u6838\u5FC3\u6982\u5FF5\u3002\u5B83\u662F\u771F\u5B9EDOM\u7684\u4E00\u4E2A\u8F7B\u91CF\u7EA7\u526F\u672C\u3002\u5F53\u72B6\u6001\u6539\u53D8\u65F6\uFF0CReact\u9996\u5148\u5728\u865A\u62DFDOM\u4E2D\u8FDB\u884C\u66F4\u65B0\uFF0C\u7136\u540E\u6BD4\u8F83\u865A\u62DFDOM\u548C\u771F\u5B9EDOM\u7684\u5DEE\u5F02\uFF0C\u6700\u540E\u53EA\u5C06\u5FC5\u8981\u7684\u66F4\u6539\u5E94\u7528\u5230\u771F\u5B9EDOM\u4E2D\u3002\u8FD9\u79CD\u65B9\u6CD5\u63D0\u9AD8\u4E86\u6027\u80FD\uFF0C\u56E0\u4E3A\u64CD\u4F5C\u771F\u5B9EDOM\u662F\u6602\u8D35\u7684\u3002"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" question: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React Hooks\u662F\u4EC0\u4E48\uFF1F"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" answer:"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"React Hooks\u662FReact 16.8\u4E2D\u5F15\u5165\u7684\u65B0\u7279\u6027\u3002\u5B83\u4EEC\u5141\u8BB8\u4F60\u5728\u4E0D\u7F16\u5199class\u7684\u60C5\u51B5\u4E0B\u4F7F\u7528state\u548C\u5176\u4ED6React\u7279\u6027\u3002\u5E38\u7528\u7684Hooks\u5305\u62ECuseState\uFF08\u7528\u4E8E\u7BA1\u7406\u72B6\u6001\uFF09\u548CuseEffect\uFF08\u7528\u4E8E\u5904\u7406\u526F\u4F5C\u7528\uFF09\u3002Hooks\u4F7F\u5F97\u4EE3\u7801\u66F4\u6613\u4E8E\u7406\u89E3\u548C\u6D4B\u8BD5\uFF0C\u5E76\u4E14\u53EF\u4EE5\u66F4\u597D\u5730\u91CD\u7528\u72B6\u6001\u903B\u8F91\u3002"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" question: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"\u5982\u4F55\u4F18\u5316React\u5E94\u7528\u7684\u6027\u80FD\uFF1F"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" answer:"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"\u4F18\u5316React\u5E94\u7528\u6027\u80FD\u7684\u65B9\u6CD5\u5305\u62EC\uFF1A\u4F7F\u7528React.memo\u8FDB\u884C\u7EC4\u4EF6\u8BB0\u5FC6\u5316\u3001\u4F7F\u7528useMemo\u548CuseCallback\u6765\u907F\u514D\u4E0D\u5FC5\u8981\u7684\u91CD\u65B0\u6E32\u67D3\u3001\u4F7F\u7528\u865A\u62DF\u5316\u6280\u672F\u5904\u7406\u957F\u5217\u8868\u3001\u4EE3\u7801\u5206\u5272\u548C\u61D2\u52A0\u8F7D\u3001\u4F18\u5316\u56FE\u7247\u548C\u5176\u4ED6\u8D44\u6E90\u3001\u4F7F\u7528\u751F\u4EA7\u6A21\u5F0F\u6784\u5EFA\u7B49\u3002\u5177\u4F53\u65B9\u6CD5\u8981\u6839\u636E\u5E94\u7528\u7684\u5177\u4F53\u60C5\u51B5\u6765\u9009\u62E9\u3002"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"FAQItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"question"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"answer"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"isOpen"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setIsOpen"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Card"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"CardHeader"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full flex justify-between items-center"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsOpen"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isOpen)"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-expanded"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isOpen"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"CardTitle"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-left"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"question"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ChevronDown"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`h-4 w-4 transition-transform duration-200 ${"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isOpen"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"transform rotate-180"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isOpen "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"collapsed"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"open"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"collapsed"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variants"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" open: { opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", height: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"auto"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" collapsed: { opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", height: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.3"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", ease: ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.04"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.62"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.23"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.98"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"CardContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"answer"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"FAQPage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"container mx-auto py-12 px-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-4xl font-bold text-center mb-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">\u5E38\u89C1\u95EE\u9898"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-3xl mx-auto"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"faqs."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"faq"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"FAQItem"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"question"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"faq.question"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"answer"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"faq.answer"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})})}function A(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var f=A;function E(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return u(x);})(); ;return Component;

FAQ

FAQ

常见问题

什么是React？

React和Vue有什么区别？

什么是虚拟DOM？

React Hooks是什么？

如何优化React应用的性能？