将 <Tab> 放入可重用函数时遇到问题

Question

我正在尝试创建一个选项卡组件，但一直被难住了。

以下示例按预期工作：

export default function ListOfTabs() {
  return(
    <Tabs>
      <Tab eventKey="home" title="Home">
        This be an example
      </Tab>
    </Tabs>
  )
}

但是，当我将组件放入这样的可重用函数中时：

function ReusableTabLink() {
  return(
    <Tab eventKey="home" title="Home">
      This be an example
    </Tab>
  )
}

然后这样称呼它：

export default function ListOfTabs() {
  return(
      <Tabs>
        <ReusableTabLink />
      </Tabs>
  )
}

我没有看到任何显示。

Answer 1

看起来 Bootstrap 中 Tabs 的 the implementation 对其使用有非常具体的期望。 :)

基本上，它期望直子具有它正在寻找的道具，如果没有它就不会起作用。我将 an example 放在一起，将 props 直接传递给您的自定义组件并显示选项卡。

我猜想如果您想这样做，您需要利用 react-bootstrap 中的 custom tab layout 机制。您可能可以将其包装在您自己的 Tabs 组件中，这有望更有意义。 :D

这是他们文档中的一个示例：

<Tab.Container id="left-tabs-example" defaultActiveKey="first">
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <Nav.Item>
          <Nav.Link eventKey="first">Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">Tab 2</Nav.Link>
        </Nav.Item>
      </Nav>
    </Col>
    <Col sm={9}>
      <Tab.Content>
        <Tab.Pane eventKey="first">
          <Sonnet />
        </Tab.Pane>
        <Tab.Pane eventKey="second">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>

将 <Tab> 放入可重用函数时遇到问题

Having trouble putting a <Tab> in a reusable function

reactjs

react-bootstrap