时间戳

首页 > 解决方案 > 无法放置在可重用函数中

reactjs - 无法放置在可重用函数中

问题描述

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

以下示例按预期工作：

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>
  )
}

我没有看到任何显示。

标签： reactjsreact-bootstrap

解决方案

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

基本上，它期望直接孩子拥有它正在寻找的道具，如果没有，它将无法工作。我整理了一个示例，其中我将道具直接传递给您的自定义组件并显示选项卡。

我猜如果你想这样做，你需要在react-bootstrap. 您可能可以将其包装在您自己的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>

推荐阅读