React-Bootstrap Tabs组件渲染全部标签页而非激活标签页问题求助

问题根因 #

React-Bootstrap 的 Tabs 组件默认行为就是预渲染所有 Tab 面板的内容，仅通过 CSS display: none 隐藏未激活标签页，不会主动销毁非激活状态的内容节点。你引入 Bootstrap、jQuery CDN 没有效果，是因为这个问题属于组件自身的渲染逻辑，和外部依赖、样式加载无关。

解决方案 #

给 Tabs 组件添加 mountOnEnter 和 unmountOnExit 两个属性即可实现「仅渲染当前激活标签页内容」的效果：

• mountOnEnter：仅在标签页第一次被激活时才渲染对应内容
• unmountOnExit：标签页切出非激活状态时，自动销毁对应内容节点

如果不需要切走就销毁，只需要首次激活时加载内容，仅保留 mountOnEnter 属性即可。

修改后的代码如下：

const [key, setKey] = useState("chart");
function CoinData(props) {
  return (
    <div>
      <Tabs
        className="tabs mb-3"
        id="controlled-tab-example"
        activeKey={key}
        onSelect={(k) => setKey(k)}
        {/* 新增控制渲染的属性 */}
        mountOnEnter
        unmountOnExit
      >
        <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>
  );
}

内容的提问来源于stack exchange，提问作者luther wardle