我如何使这个 React Core UI Tab Pane 组件工作？

如何解决我如何使这个 React Core UI Tab Pane 组件工作？

我正在尝试使用核心 ui react 选项卡窗格组件。选项卡窗格应根据单击的选项卡标题显示，默认情况下应显示第一个选项卡窗格。问题是它根本不起作用并且根本不显示任何选项卡窗格。组件是这样的：

import React,{ useState } from 'react

const Tab = () => {
  const [activeKey,setActiveKey] = useState(1)
  return (
    <>
      <CNav variant="pills">
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 1}
            onClick={() => setActiveKey(1)}
          >
            Active
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 2}
            onClick={() => setActiveKey(2)}
          >
            Link
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink
            href="#"
            active={activeKey === 3}
            onClick={() => setActiveKey(3)}
          >
            Link
          </CNavLink>
        </CNavItem>
      </CNav>
      <CTabContent>
        <CTabPane visible={activeKey === 1}>
          Raw denim you probably haven't heard of them jean shorts Austin.
          Nesciunt tofu stumptown aliqua,retro synth master cleanse. Mustache
          cliche tempor,williamsburg carles vegan helvetica. Reprehenderit
          butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,qui irure terry richardson ex squid. Aliquip placeat salvia cillum
          iphone. Seitan aliquip quis cardigan american apparel,butcher
          voluptate nisi qui.
        </CTabPane>
        <CTabPane visible={activeKey === 2}>
          Food truck fixie locavore,accusamus mcsweeney's marfa nulla
          single-origin coffee squid. Exercitation +1 labore velit,blog
          sartorial PBR leggings next level wes anderson artisan four loko
          farm-to-table craft beer twee. Qui photo booth letterpress,commodo
          enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum
          PBR. Homo nostrud organic,assumenda labore aesthetic magna delectus
          mollit. Keytar helvetica VHS salvia yr,vero magna velit sapiente
          labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,sustainable jean shorts beard ut DIY ethical culpa terry richardson
          biodiesel. Art party scenester stumptown,tumblr butcher vero sint
          qui sapiente accusamus tattooed echo park.
        </CTabPane>
        <CTabPane visible={activeKey === 3}>
          Etsy mixtape wayfarers,ethical wes anderson tofu before they sold
          out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table
          readymade. Messenger bag gentrify pitchfork tattooed craft beer,iphone skateboard locavore carles etsy salvia banksy hoodie
          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit
          cred pitchfork. Williamsburg banh mi whatever gluten-free,carles
          pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester
          cred you probably haven't heard of them,vinyl craft beer blog
          stumptown. Pitchfork sustainable tofu synth chambray yr.
        </CTabPane>
      </CTabContent>
    </>
  )
}

export default Tab

在检查控制台时，我看到错误：Warning: Received "true" for a non-boolean attribute 'visible' 。我通过将布尔评估变量包装到模板文字中来解决这个问题，这消除了控制台中的错误，但代码仍然没有按预期工作。 以下是我为消除控制台错误所做的修复：

...

<CTabContent>
        <CTabPane visible={`${activeKey === 1}`}>
          ...
        </CTabPane>
        <CTabPane visible={`${activeKey === 2}`}>
          ...
        </CTabPane>
        <CTabPane visible={`${activeKey === 3}`}>
          ...
        </CTabPane>
      </CTabContent>
...

这是核心用户界面文档页面的链接：https://coreui.io/react/docs/4.0/components/tabs/#example

谢谢

解决方法

您没有提到您使用的 Core UI 版本。我很确定它小于 v4.0。在版本 3.x 中，CTabPane 标记中没有“可见”属性。您必须使用属性“活动”。所以，它应该是这样的，

<CTabPane active={activeKey === 1}> Data </CTabPane>