React中如何根据当前选中的tab状态渲染数组中对应的组件

核心实现逻辑 #

你已经把tab对应的组件存入了allTabs数组，只需要用当前tabNum作为索引取出对应组件渲染即可，另外先修正原代码中的两个错误：

• 第二个tab按钮的事件名写错，React事件需使用驼峰格式onClick
• 原有changeTab逻辑写死仅支持两个tab切换，改为读取按钮id动态设置tab值适配后续扩展

完整修正代码 #

import React, {useState} from "react";

import Tabcomp1 from './../components/tabcomp1';
import Tabcomp2 from './../components/tabcomp2';

const allTabs = [Tabcomp1, Tabcomp2];

const Pagetwo = () =>{
  const[tabNum, setTabNum] = useState("0");
  const changeTab = (e) =>{
    e.preventDefault();
    // 直接读取点击按钮的id设置当前tab
    const currentTab = e.target.id;
    setTabNum(currentTab);
    // 注意setTabNum是异步方法，这里打印tabNum拿到的是更新前的旧值，需要看新值可以打印currentTab
    console.log(currentTab);
  }

  // 取出当前要渲染的组件，注意把字符串类型的tabNum转成数字
  const CurrentTabComp = allTabs[Number(tabNum)];

  return(
    <div>
        <h1>you are now on page 2</h1>
        {/* tab1 */}
        <button id={0} onClick={changeTab}>tab 1</button>
        {/* tab2 */}
        <button id={1} onClick={changeTab}>tab 2</button>
        <br />
        {/* 渲染当前tab组件 */}
        <CurrentTabComp />
    </div>
  )
}

export default Pagetwo;

可选简化写法 #

如果不需要兼容后续tab扩展，也可以用三元运算符直接条件渲染：

{tabNum === '0' ? <Tabcomp1 /> : <Tabcomp2 />}

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