Reactjs刷新时保持物料Ui选项卡处于选中状态

import React, { useState, useEffect } from 'react';

const TabComponent = () => {
  const [activeTab, setActiveTab] = useState(0);

  useEffect(() => {
    // 从localStorage中读取选中状态
    const storedActiveTab = localStorage.getItem('activeTab');
    if (storedActiveTab) {
      setActiveTab(parseInt(storedActiveTab));
    }
  }, []);

  const handleTabClick = (index) => {
    setActiveTab(index);
    // 将选中状态保存到localStorage中
    localStorage.setItem('activeTab', index.toString());
  };

  return (
    <div>
      <div className={activeTab === 0 ? 'active' : ''} onClick={() => handleTabClick(0)}>Tab 1</div>
      <div className={activeTab === 1 ? 'active' : ''} onClick={() => handleTabClick(1)}>Tab 2</div>
      <div className={activeTab === 2 ? 'active' : ''} onClick={() => handleTabClick(2)}>Tab 3</div>
    </div>
  );
};

export default TabComponent;