Bootstrap React 选项卡没有显示标题/选项卡名称，这是什么问题？答案

【问题标题】：Bootstrap React tabs are not showing title/Tab name, what is the issue?Bootstrap React 选项卡没有显示标题/选项卡名称，这是什么问题？
【发布时间】：2018-05-12 18:12:53
【问题描述】：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Tab, Tabs, TabList, TabPanel} from 'react-bootstrap-tabs';

const tabsInstance = (
  <Tabs defaultActiveKey={2} id="uncontrolled-tab-example" bsStyle="pils">
    <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>
);

class ProfileTab extends Component {
  constructor(props){
    super(props);

  }
  render(){
    return (
      <section>
         <div className="container-fluid profile_section_container">
            {tabsInstance}
        </div>
      </section>
    );
  }

}

export default ProfileTab;

标签标题不显示标签工作正常且可点击但不显示

Bootstrap React 选项卡不显示标题/选项卡名称，这是什么问题？

【问题讨论】：

标签： twitter-bootstrap reactjs

【解决方案1】：

确保您没有将任何自定义组件放入 Tab 与其子 Tab 之间的层次结构中。 React Bootstrap 正在 Tabs 的直系后代上寻找“标题”。

不起作用：

<Tabs>
    <CustomComponent>
      <Tab title="Your Title">...</Tab>
    </CustomComponent>
</Tab>

作品：

<Tabs>
    <Tab title="Your Title">...</Tab>
</Tab>

在此处查看回复：https://github.com/react-bootstrap/react-bootstrap/issues/2246#issuecomment-251266675

【讨论】：

【解决方案2】：

改用标签。

<Tab eventKey={1} title="Tab 1" label="Tab 1">
Tab 1 content
</Tab>

<Tab eventKey={2} title="Tab 2" Label="Tab 2">
Tab 2 content
</Tab>

<Tab eventKey={3} title="Tab 3" Label="Tab 3">Tab 3 content</Tab>

);

【讨论】：

是的，分配标签的东西正在工作

【解决方案3】：

As Danny mentioned above using label it will visible.
here is another example.

`<Tabs
                id="portfolio-main-tab"
                activeKey={key}
                onSelect={(k) => setKey(k)}
                className="nav nav-tabs"
            >
                <Tab eventKey="home" title="Home" label="Home">
                    <div>Tab 1</div>
                </Tab>
                <Tab eventKey="profile" title="Profile" label="Profile">
                    <div>Profile</div>
                </Tab>
            </Tabs>`

【讨论】：