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

Question

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标签没有显示标题/标签名称，问题是什么？

Answer 1

确保没有在Tabs及其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

Answer 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>

）;