You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.21 15:19:41