选项卡不显示内容并且选项卡上没有样式
选项卡不显示内容，这是代码。我该如何解决这个问题？
我究竟做错了什么？
这段代码与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;
网页上的页面 https://i.stack.imgur.com/b0ORn.jpg
我确实需要帮助才能继续前进
问题是您的 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">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
