react-bootstrap选项卡-内容未显示 [英] react-bootstrap tabs - content is not showing
本文介绍了react-bootstrap选项卡-内容未显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
选项卡未显示内容,这是代码.我该如何解决?
the tabs are not showing content, here is the code. how can i solve this?
我在做什么错了?
此代码几乎与react-bootstrap页面上的代码相似
this code is almost similar to the one on react-bootstrap page
//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;
我确实需要帮助以保持前进
I do need help to keep moving forward
推荐答案
尝试导入 react-tabs
和 react-tabs而不是导入
.跟随此链接解决了我的问题. react-bootstrap
.CSS
Instead of importing react-bootstrap
try importing react-tabs
and react-tabs.css
. Following this link solved my issue.
这篇关于react-bootstrap选项卡-内容未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文