Twitter bootstrap 引导选项卡未显示标题/选项卡名称，问题是什么？ import React，{Component}来自'React'； 从'react redux'导入{connect}； 从'react bootstrap Tabs'导入{Tab，Tabs，TabList，TabPanel}； 常量选项卡状态=( 表1内容 表2内容 表3内容 ); 类ProfileTab扩展组件{ 建造师（道具）{ 超级（道具）； } render（）{ 返回( {tabsInstance} ); } } 导出默认配置文件选项卡；

选项卡标题未显示选项卡工作正常，可单击但未显示

引导选项卡未显示标题/选项卡名称，问题是什么

---

确保没有在选项卡及其子选项卡之间的层次结构中放置任何自定义组件。React Bootstrap正在选项卡的直接后代上查找“标题”

不起作用：

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;

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

...

有效：

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;

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

...

请参见此处的回复：

改用标签

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

表1内容
表2内容
表3内容

);