React ant design Tab图标改变不同状态

Question

我正在使用 ant design tab 的 React TypeScript 项目，每次单击第二个选项卡时，第一个选项卡上的图标应该会更改锁定，第二个选项卡将有书本图标。如果我再次单击第一个选项卡，它将显示书本图标，而第二个选项卡更改为锁定。

stazkblitz here

代码在这里

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Tabs } from 'antd';
import { FileDoneOutlined, LockOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

ReactDOM.render(
  <Tabs defaultActiveKey="2">
    <TabPane
      tab={
        <span>
         <FileDoneOutlined />
          Tab 1
        </span>
      }
      key="1"
    >
      Tab 1
    </TabPane>
    <TabPane
      tab={
        <span>
    < LockOutlined/>
          Tab 2
        </span>
      }
      key="2"
    >
      Tab 2
    </TabPane>
  </Tabs>,
  document.getElementById('container'),
);

Answer 1

最简单的方法是切换到使用选项卡作为受控组件，这样您就可以根据当前活动的选项卡对渲染进行更改。

然后只需使用三元运算符根据每个选项卡是否处于活动状态切换图标

工作 Stackblitz：https://stackblitz.com/edit/react-uwhrx3-oajdjw?file=index.js

代码如下：

function TabPage() {
  // useState to make the Tabs controlled
  const [tab, setTab] = useState("2");
  return (
    <Tabs
      activeKey={tab}
      onChange={key => {
        setTab(key);
      }}
    >
      <TabPane
        tab={
          <span>
            {/* Use a ternary operator to conditionally render the Icons */}
            {tab === "1" ? <FileDoneOutlined /> : <LockOutlined />}
            Tab 1
          </span>
        }
        key="1"
      >
        Tab 1
      </TabPane>
      <TabPane
        tab={
          <span>
            {tab === "2" ? <FileDoneOutlined /> : <LockOutlined />}
            Tab 2
          </span>
        }
        key="2"
      >
        Tab 2
      </TabPane>
    </Tabs>
  );
}

只是为了好玩，我将其设置为使选项卡使用配置数组来设置窗格。

https://stackblitz.com/edit/react-uwhrx3-vnkdcq?file=index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Tabs } from "antd";
import {
  FileDoneOutlined,
  LockOutlined,
  RadarChartOutlined
} from "@ant-design/icons";

const { TabPane } = Tabs;

function TabPage() {
  // useState to make the Tabs controlled
  const [tab, setTab] = useState("1");

  /**
   * @type {{title: React.ReactNode; content: React.ReactNode, icon?: Icon}[]}
   *
   * This config array will generate the tabs with the title and content desired
   */
  const tabs = [
    { title: "Tab 1", content: "Tab 1" },
    {
      title: "Radar Chart",
      content: "This is the best chart you'll see",
      icon: <RadarChartOutlined />
    },
    { title: "Tab 3", content: "Tab 3" }
  ];
  return (
    <Tabs
      activeKey={tab}
      onChange={key => {
        setTab(key);
      }}
    >
      {tabs.map(({ title, content, icon }, index) => {
        const key = `${index}`;
        return (
          <TabPane
            key={key}
            tab={
              <span>
                {tab === key ? icon ?? <FileDoneOutlined /> : <LockOutlined />}
                {title}
              </span>
            }
          >
            {content}
          </TabPane>
        );
      })}
    </Tabs>
  );
}

ReactDOM.render(<TabPage />, document.getElementById("container"));

Answer 2

这是带有标签标题可重用组件的解决方案。

Example in stackblitz

React ant design Tab图标改变不同状态

React ant design Tab icon change different status

reactjs

antd

react-typescript