在react原生应用中动态添加选项卡

import React, { useState } from 'react';

const TabComponent = () => {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const [tabs, setTabs] = useState([{ title: 'Tab 1', content: 'Content 1' }]);

  const addTab = () => {
    const newTab = { title: `Tab ${tabs.length + 1}`, content: `Content ${tabs.length + 1}` };
    setTabs([...tabs, newTab]);
  };

  const handleTabClick = (index) => {
    setActiveTabIndex(index);
  };

  return (
    <div>
      <div className="tab-header">
        {tabs.map((tab, index) => (
          <button
            key={index}
            className={index === activeTabIndex ? 'active' : ''}
            onClick={() => handleTabClick(index)}
          >
            {tab.title}
          </button>
        ))}
        <button onClick={addTab}>Add Tab</button>
      </div>
      <div className="tab-content">
        {tabs[activeTabIndex].content}
      </div>
    </div>
  );
};

export default TabComponent;