如何自定义 React-Bootstrap 上的选项卡

Question

我正在使用此站点的react-bootstrap：http://react-bootstrap.github.io/components.html

我想知道如何自定义这样的选项卡（在选项卡部分）：

const tabsInstance = (
  <Tabs defaultActiveKey={2}>
    <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" disabled>Tab 3 content</Tab>
  </Tabs>
);

ReactDOM.render(tabsInstance, mountNode);

我想添加一个十字按钮来关闭它，但我没有找到如何做到这一点。你能帮我吗 ？

Answer 1

我没有看到 Bootstrap 和这个 React 包装器默认支持你想要的行为。我推荐的技术是扩展选项卡组件来执行您想要的操作，可以在这里找到： https: //github.com/react-bootstrap/react-bootstrap/blob/master/src/Tabs.js

看看其他人如何使用 JQuery 之类的东西在旧版本的 Bootstrap 中添加此行为： How to add a close icon in bootstrap tabs?

使用它给自己一个想法，然后创建一个新组件或使用组合扩展现有的 Tabs 组件：扩展 React.js 组件