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;

page on web

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

Answer 1

问题是您的 css 没有为引导组件加载。如果你在你的 React 应用程序的 index.html 的标题中添加它，它应该看起来是正确的。我看到您正在尝试将 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-tabs 和react-tabs.css，而不是导入react-bootstrap。关注this 链接解决了我的问题。