react-bootstrap 选项卡 - 内容未显示

Question

标签不显示内容并且标签上没有样式

选项卡没有显示内容，这是代码。 我该如何解决这个问题？

我究竟做错了什么？

这段代码几乎与 react-bootstrap 页面上的代码相似

 //simple tabs.js import React, {Component} from 'react'; import {Tabs, Tab} from 'react-bootstrap'; import TabItem from './TabItem'; import data from './data' class SimpleTabs extends Component{ constructor(props){ super(props); this.state = { key: 1 | props.activeKey } this.handleSelect = this.handleSelect.bind(this); } handleSelect (key) { console.log("selected " + key); this.setState({key}) } render(){ return ( <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example" > <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab 2"> Tab 2 content </Tab> <Tab eventKey={3} title="Tab 3"> Tab 3 content </Tab> </Tabs> ); } } export default SimpleTabs; // App.js import React, { Component } from 'react'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import SimpleTabs from './components/SimpleTabs'; import 'bootstrap/dist/js/bootstrap.bundle.min'; import 'bootstrap/dist/css/bootstrap.css' class App extends Component { render() { return ( <SimpleTabs /> ); } } export default App;

网页上的

我确实需要帮助才能继续前进

Answer 1

问题是您的 css 没有为 bootstrap 组件加载。 如果您将它添加到 index.html 的标题中，您服务的 React 应用程序应该看起来是正确的。 我看到您正在尝试将 min.css 添加到应用程序。 不知道为什么这不起作用，但这会起作用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 2

不要导入react-bootstrap尝试导入react-tabs和react-tabs.css 。 按照此链接解决了我的问题。