React use refs on dynamic选项卡面板

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

const TabPanel = () => {
  const [activeTab, setActiveTab] = useState(0);
  const panelRefs = useRef([]);

  const handleTabChange = (index) => {
    setActiveTab(index);
    // 获取当前选项卡对应的内容组件实例或DOM元素
    const currentPanel = panelRefs.current[index].current;
    // 在这里可以对内容进行操作
  };

  const renderTabs = () => {
    // 渲染选项卡头部
    return (
      <ul>
        {tabs.map((tab, index) => (
          <li
            key={index}
            onClick={() => handleTabChange(index)}
            className={index === activeTab ? 'active' : ''}
          >
            {tab}
          </li>
        ))}
      </ul>
    );
  };

  const renderTabPanels = () => {
    // 渲染选项卡内容
    return (
      <div>
        {tabs.map((tab, index) => (
          <div
            key={index}
            ref={panelRefs.current[index]} // 创建ref引用
            className={index === activeTab ? 'active' : ''}
          >
            {/* 在这里渲染选项卡内容 */}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div>
      {renderTabs()}
      {renderTabPanels()}
    </div>
  );
};

export default TabPanel;