TailwindUI标签页组件在React项目中无法显示面板内容的问题求助
TailwindUI标签页组件在React项目中无法显示面板内容的问题求助
大家好,我最近在React项目里尝试使用TailwindUI的Tabs组件,结果遇到了个头疼的问题:我严格按照官方给出的代码复制粘贴,但页面上只显示了标签的头部导航,点击任何标签都看不到对应的面板内容。
先给大家看一下我定义的tabs数据:
const tabs = [ { name: 'Sent', href: '#', count: '52', current: true }, { name: 'Received', href: '#', count: '6', current: false }, ]
然后是我抄的标签组件代码:
<div> <div className="sm:hidden"> <label htmlFor="tabs" className="sr-only">Select a tab</label> {/* Use an "onChange" listener to redirect the user to the selected tab URL. */} <select id="tabs" name="tabs" className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" defaultValue={tabs.find((tab) => tab.current).name} > {tabs.map((tab) => ( <option key={tab.name}>{tab.name}</option> ))} </select> </div> <div className="hidden sm:block"> <div className="border-b border-gray-200"> <nav className="-mb-px flex space-x-8" aria-label="Tabs"> {tabs.map((tab) => ( <a key={tab.name} href="#" className={classNames( tab.current ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700', 'flex whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium' )} aria-current={tab.current ? 'page' : undefined} > {tab.name} {tab.count ? ( <span className={classNames( tab.current ? 'bg-indigo-100 text-indigo-600' : 'bg-gray-100 text-gray-900', 'ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block' )} > {tab.count} </span> ) : null} </a> ))} </nav> </div> </div> </div>
我反复核对了好几遍,代码和官方示例完全一致,但就是没有面板内容显示。是不是官方示例里默认只提供了标签头部的代码,我需要自己手动实现面板的切换逻辑和内容区域?还是我哪里配置错了导致内容不渲染?麻烦各位大佬帮忙看看问题出在哪,谢谢了!
备注:内容来源于stack exchange,提问作者BigJobbies
相关产品推荐
相关产品推荐

