无法在react-bootstrap中看到'Tab'组件内的内容

Question

我正在使用react-bootstrap框架的Tabs组件。 当我举一个例子：

<div>
   <p> AAAAAAA </p>
</div>

在Tab我在此标签中看不到任何内容。

<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <div>
      <p>sssssssssssssssssss</p>
    </div>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <div>
      <img src="https://cdn.pixabay.com/photo/2019/08/03/12/22/hot-air-balloons-4381674__340.jpg" alt="picture"/>
    </div>
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
  </Tab>
</Tabs>

演示在这里： https : //stackblitz.com/edit/react-ufa6nq?file=index.js

Answer 1

您已在项目中添加了三个引导CSS。 在index.html文件中添加了两个CSS链接，在index.js文件中添加了一个CSS链接。

删除import 'bootstrap/dist/css/bootstrap.css'; 从index.js文件中删除一行，并从index.html文件中删除bootstrap.min.css链接之一。

在这里，我已经为您更新了工作代码。
https://stackblitz.com/edit/react-bootstrap-tabs-3gt7r7

希望这对您有用！

Answer 2

这里的问题是react-bootstrap版本。

您具有基于bootstrap 3 react-bootstrap v0.32.4 。 因此，从代码中删除bootstrap 4将解决此问题。

演示

---

要使用bootstrap 4.x您需要安装react-bootstrap v1.0.0-beta.10 。

您可以在此处检查标题本身。

---

注意：默认情况下， stackBlitz安装的是react-bootstrap v0.32.4 （旧版本），而不是新版本。 为此，您可以在stackBlitz 社区中提出查询。