React+TS React.FC函数组件 Tab简单的选中切换加变色

一个简单的简单点击切换页面，并且标签跟着变色

其原理很简单，用数组.map的方法，动态生成导航栏或Tab，给它再设定一个key或activeKey值，通过key值去判定颜色是否显示和隐藏,可用于style和className的变化.

key值指的就是唯一的标识,比如id

ps：我个人喜欢命名为key或activeKey，你们也可以命名为其他的，反正必须是唯一的。

页面切换在最下面0.0

这是我的Tab数据

const TabList = [
    { activeKey: 1, name: '视频管理' },
    { activeKey: 2, name: '音频管理' },
  ]

在代码里循环出来，注意设置key值，我的是1和2.

        {
            TabList.map((val) =>
              <>
                <div
                  key={val.activeKey}
                >
                  <span>{val.name}</span>
                </div>
              </>)
          }

循环出来长这样：

然后用到React.FC函数组件的useState

  //定义一个可以接收key的值和方法
  const [TabField, SetTabField] = useState(1);
  //设置获取的key值
  const handdleSetTagStr = (val: any) => {
    SetTabField(val);
  };

然后优化一下遍历出来的Tab代码，增加一个onClick事件，用来设置TabField的值，方便用来判断样式是否显示

    {
      TabList.map((val) =>
        <>
          <div
            key={val.activeKey}
            onClick={() => handdleSetTagStr(val.activeKey)}  //改变TabField的值
            style={{ color: (TabField === val.activeKey) ? "#0092da" : "" }}//判断样式是否显示
          >
            <span>{val.name}</span>
          </div>
          </>)
   }

然后就可以切换了,效果图如下:

切换

完整代码如下:

import React, { useState } from 'react';
const chuangzuo: React.FC = () => {
  //定义一个可以接收key的值和方法
  const [TabField, SetTabField] = useState(1);
  //设置获取的key值
  const handdleSetTagStr = (val: any) => {
    SetTabField(val);
  };
  const TabList = [
    { activeKey: 1, name: '视频管理' },
    { activeKey: 2, name: '音频管理' },
  ]
  return (
        <div>
          {
            TabList.map((val) =>
              <>
                <div
                  key={val.activeKey}
                  onClick={() => handdleSetTagStr(val.activeKey)}
                  // style={{ color: (TabField === val.activeKey) ? "#0092da" : "" }}
                  className={`${TabField === val.activeKey ? 'testData' : ''}`}
                >
                  <span>{val.name}</span>
                </div>
              </>)
          }
       </div>
  );
};
export default chuangzuo;

当然,也可以用这个方法改变className的属性,个人推荐用ES6的写法,也就是使用反引号,可以写多个className属性.

        {
            TabList.map((val) =>
              <>
                <div
                  key={val.activeKey}
                  onClick={() => handdleSetTagStr(val.activeKey)}
                  // style={{ color: (TabField === val.activeKey) ? "#0092da" : "" }}
                  className={`${TabField === val.activeKey ? 'testData' : ''}`}
                >
                  <span>{val.name}</span>
                  <div></div>
                </div>
              </>)
          }

切换页面的话有很多方法,我是使用的switch..case,通过key值,返回不同的页面.

import React, { useState } from 'react';
import ShiPin from '@/pages/personalPage/components/PageComponents/chuangzuoshipin';
import YinPin from '@/pages/personalPage/components/PageComponents/chuangzuoyinpin';
const chuangzuo: React.FC = () => {
  //定义一个可以接收key的值和方法
  const [TabField, SetTabField] = useState(1);
  //设置获取的key值
  const handdleSetTagStr = (val: any) => {
    SetTabField(val);
  };
  //根据获取的值返回对应的页面
  const ifnum = (val: any) => {
    switch (val) {
      case 1:
        return <ShiPin />;
      case 2:
        return <YinPin />;
      default:
        console.log(`出错`);
        break;
    }
  };
  const TabList = [
    { activeKey: 1, name: '视频管理' },
    { activeKey: 2, name: '音频管理' },
  ]

  return (
    <div className="chuangZuoPage">
      <div className="chuangzuo-content">
        <div className="chuangzuo-content-top">
          {
            TabList.map((val) =>
              <>
                <div
                  key={val.activeKey}
                  onClick={() => handdleSetTagStr(val.activeKey)}
                  style={{ color: (TabField === val.activeKey) ? "#0092da" : "" }}
                >
                  <span>{val.name}</span>
                  <div></div>
                </div>
              </>)
          }
        </div>
        {/*这里是页面的显示*/}
        <div className="chuangzuo-content-cont">{ifnum(TabField)}</div>
      </div>
    </div>
  );
};
export default chuangzuo;

以上是全部内容了,如果有什么错误或者不足之处,请大佬们指出来,谢谢