在 react-bootstrap <Tab> 标题旁边添加徽章

Question

我正在使用react-bootstrap tab component：

如何在标签标题（消息）旁边添加徽章

<span class="badge badge-success">20</span>


<Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <Tab eventKey="home" title="Home">
        <Home/>
      </Tab>
      <Tab eventKey="profile" title="Profile">
       <Profile/>
      </Tab>
      <Tab eventKey="contact" title="Messages" disabled>
        <Messages/>
      </Tab>
    </Tabs>

所以我可以向用户显示他有多少未读消息。

Answer 1

类似这样的：

import React from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab, Badge } from "react-bootstrap";
import Lorem from "react-lorem-component";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
      <Tabs fill defaultActiveKey="home" id="uncontrolled-tab-example">
        <Tab
          eventKey="home"
          title={
            <React.Fragment>
              Home
              <Badge variant='light'>9</Badge>
            </React.Fragment>
          }
          mountOnEnter
          unmountOnExit={false}
        >
          <Lorem count="2"/>
        </Tab>
        <Tab
          eventKey="profile"
          title="Profile"
          mountOnEnter
          unmountOnExit={false}
        >
          <Lorem count="2"/>
        </Tab>
      </Tabs>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);