ReactJS:如何从两个不同选项卡上的表中填充特定数据

import React, { useState } from 'react';

const TabComponent = () => {
  const [activeTab, setActiveTab] = useState('tab1');
  
  const handleTabChange = (tab) => {
    setActiveTab(tab);
  };
  
  const renderTableData = () => {
    // 根据数据源填充表格数据
    // 这里使用静态数据作为示例
    const data = [
      { id: 1, name: 'John Doe', age: 25 },
      { id: 2, name: 'Jane Smith', age: 30 },
      // 更多数据...
    ];
    
    return data.map((item) => (
      <tr key={item.id}>
        <td>{item.name}</td>
        <td>{item.age}</td>
      </tr>
    ));
  };
  
  return (
    <div>
      <div>
        <button onClick={() => handleTabChange('tab1')}>Tab 1</button>
        <button onClick={() => handleTabChange('tab2')}>Tab 2</button>
      </div>
      {activeTab === 'tab1' && (
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            {renderTableData()}
          </tbody>
        </table>
      )}
      {activeTab === 'tab2' && (
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            {renderTableData()}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default TabComponent;