0
我正在使用React-Bootstrap框架,並且遇到了Tabs/Tab組件顯示不正確的問題。有活動標籤下的下劃線:react-bootstrap標籤有下劃線
這裏的渲染代碼:
const React = require('react');
const { Tabs, Tab } = require('react-bootstrap');
const Account = React.createClass({
getInitialState() {
return {
activeTab: 1,
};
},
componentWillMount() {
const section = this.props.params.section ? this.props.params.section : 'contact';
let activeTab;
switch (section) {
case 'contact':
activeTab = 1;
break;
case 'security':
activeTab = 2;
break;
case 'notifications':
activeTab = 3;
break;
default:
// default to contact tab
activeTab = 1;
break;
}
this.setState({ activeTab });
},
render() {
return (
<div className="u__narrow">
<h1 className="__page-title">Your Account</h1>
<Tabs id="accountSections" activeKey={this.state.activeTab} onSelect={key => this.setState({activeTab: key })}>
<Tab eventKey={1} title="Contact Info">
<ContactInfo />
</Tab>
<Tab eventKey={2} title="Password & Security">
<Security />
</Tab>
<Tab eventKey={3} title="Email Notifications">
<Notifications />
</Tab>
</Tabs>
</div>
);
},
});
module.exports = Account;
我做了確切的事情,如文檔,但我遇到了下劃線問題
根據您發佈的圖片和https://react-bootstrap.github.io/components.html#tabs-controlled中的圖片判斷,您看起來像缺少這些組件的css。你如何將自舉CSS引入你的應用程序? react-bootstrap默認不提供它 – finalfreq