4

このサイトの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);

閉じるための十字ボタンを追加したいのですが、その方法が見つかりませんでした。私を助けてくれませんか？

4

2 に答える 2

3

Bootstrap とこの React ラッパーでは、希望する動作がデフォルトでサポートされているようには見えません。私がお勧めするテクニックは、タブコンポーネントを拡張して、ここにある目的を実行することです: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Tabs.js

JQueryのようなものを使用して、他の人が古いバージョンのBootstrapにこの動作をどのように追加したかを見てみましょう: How to add a close icon in bootstrap tab?

それを使用して自分自身にアイデアを与えてから、新しいコンポーネントを作成するか、コンポジションを使用して既存の Tabs コンポーネントを拡張します: React.js コンポーネントの拡張

于 2015-11-01T02:05:59.787 に答える