react bootstrap 选项卡组件呈现所有选项卡

Question

我有一个应该很简单的问题，但到目前为止或在文档中我找不到解决方案

https://react-bootstrap.github.io/components/tabs/

出于某种原因，我的组件呈现了我所有的实际选项卡而不是活动选项卡，即使我将它设置为仅显示活动选项卡...希望有人可以提供一些见解，我已经包含了 bootstrap 和 jquery 我的 index.html 中的 CDN 尝试修复它，但没有什么区别

const [key, setKey] = useState("chart");
function CoinData(props) {
  return (
    <div>
      <Tabs
        className="tabs"
        id="controlled-tab-example"
        activeKey={key}
        onSelect={(k) => setKey(k)}
        className="mb-3"
      >
        <Tab eventKey="chart" title="Charts">
          {allLoading ? (
            "Loading token data..."
          ) : (
            <table>
              <tbody>
                <tr>
                  <th>Address</th>
                  <th>Symbol</th>
                  <th>In Eth</th>
                  <th>Liquidity</th>
                </tr>

                {allTokenData.tokens.map((token, index) => (
                  <tr className="row" key={index}>
                    <td>{token.id}</td>
                    <td>{token.symbol}</td>
                    <td>{parseFloat(token.derivedETH).toFixed(4)}</td>
                    <td>{token.totalLiquidity}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </Tab>

        <Tab eventKey="track" title="Tracker">
          <Tracker />
        </Tab>
      </Tabs>
    </div>
  );
}

Answer 1

您很可能会忘记导入 bootstrap.css

这是您代码的最小化工作版本：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

function CoinData(props) {
  const [key, setKey] = useState("chart");
  return (
    <div>
      <Tabs
        className="tabs"
        id="controlled-tab-example"
        activeKey={key}
        onSelect={(k) => setKey(k)}
      >
        <Tab eventKey="chart" title="Charts">
          <h1>1</h1>
        </Tab>
        <Tab eventKey="track" title="Tracker">
        <h1>2</h1>
        </Tab>
      </Tabs>
    </div>
  );
}

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

react bootstrap 选项卡组件呈现所有选项卡

react bootstrap tabs component renders all tabs

reactjs

react-bootstrap

use-state