React Bootstrap Tab 一次显示所有内容

Question

我正在尝试合并一个基于 React Bootstrap 文档的 Tab 组件。但是，它只是一个接一个地显示所有内容，而不是仅在我导航到其他选项卡时显示相应的内容。我错过了什么？作为参考，我使用的代码如下：

<Tabs defaultActiveKey='ownership' className='categories'>
<Tab eventKey='ownership' title='Ownership'> <Ownership /> </Tab>
<Tab eventKey='profile' title='Energy'> <Energy /> </Tab>
<Tab eventKey='service' title='Service'> <Service /> </Tab>
<Tab eventKey='behuman' title='Be Human'> <Human /> </Tab>
</Tabs>

其中所有权、能源、服务和人类是旨在成为内容的组件/类，就像原始文档对十四行诗的使用一样。

Answer 1

您还需要安装原版 Bootstrap 并导入所需的样式表。

因为 React-Bootstrap 不依赖于非常精确的 Bootstrap 版本， 我们不附带任何包含的 CSS。但是，一些样式表是 需要使用这些组件。

1.安装引导程序：

npm install bootstrap

或

yarn add bootstrap

2. 导入样式：

import 'bootstrap/dist/css/bootstrap.min.css';

---

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";
import Ownership from "./components/Ownership";
import Energy from "./components/Energy";
import Service from "./components/Service";
import BeHuman from "./components/BeHuman";
export default function App() {
return (
<Tabs defaultActiveKey="ownership" className="categories m-3">
<Tab eventKey="ownership" title="Ownership">
<Ownership />
</Tab>
<Tab eventKey="profile" title="Energy">
<Energy />
</Tab>
<Tab eventKey="service" title="Service">
<Service />
</Tab>
<Tab eventKey="behuman" title="Be Human">
<BeHuman />
</Tab>
</Tabs>
);
}

下面是基于您的代码的基本示例。