如何使这个 React Core UI 选项卡窗格组件工作？

Question

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

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>
...

这是 link 核心文档页面 ui：https://coreui.io/react/docs/4.0/components/tabs/#example

谢谢

Answer 1

您没有提到您正在使用的核心 UI 版本。我很确定它低于 v4.0。在 3.x 版本中，CTabPane 标签中没有 'visible' 属性。你必须使用属性 'active'。所以，它应该是这样的，

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

如何使这个 React Core UI 选项卡窗格组件工作？

How do I make this React Core UI Tab Pane component work?

javascript

reactjs

core-ui