Блог

Я использую проект react typescript с вкладкой дизайна ant, каждый раз, когда я нажимаю на 2-ю вкладку, значок на 1-й вкладке должен быть изменен на lock, а на 2-й вкладке будет значок книги. Если я снова нажму на 1-ю вкладку, вместо нее отобразится значок книги, а 2-я вкладка будет изменена на блокировку.

stazkblitz здесь

код здесь

 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'),
);
  

Самый простой способ — переключиться на использование вкладок в качестве управляемого компонента, чтобы вы могли вносить изменения в рендеринг на основе текущей активной вкладки.

Затем просто используйте троичный оператор для переключения значка для каждой вкладки в зависимости от того, активна ли она

Рабочий стекблитц: 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"));  

Вот решение с многоразовым компонентом для заголовка вкладок.

Пример в stackblitz