禁用特定选项卡的按钮

import React, { useState } from 'react';

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

  const handleTabChange = (tabIndex) => {
    setActiveTab(tabIndex);
  };

  const isButtonDisabled = (tabIndex) => {
    // 根据特定条件判断是否禁用按钮
    return tabIndex === 1; // 禁用第二个选项卡的按钮
  };

  return (
    <div>
      <ul className="tab-list">
        <li className={activeTab === 0 ? 'active' : ''} onClick={() => handleTabChange(0)}>选项卡1</li>
        <li className={activeTab === 1 ? 'active' : ''} onClick={() => handleTabChange(1)}>选项卡2</li>
        <li className={activeTab === 2 ? 'active' : ''} onClick={() => handleTabChange(2)}>选项卡3</li>
      </ul>
      <div className="tab-content">
        {activeTab === 0 && (
          <div>
            <button disabled={isButtonDisabled(0)}>按钮1</button>
            <button disabled={isButtonDisabled(0)}>按钮2</button>
          </div>
        )}
        {activeTab === 1 && (
          <div>
            <button disabled={isButtonDisabled(1)}>按钮1</button>
            <button disabled={isButtonDisabled(1)}>按钮2</button>
          </div>
        )}
        {activeTab === 2 && (
          <div>
            <button disabled={isButtonDisabled(2)}>按钮1</button>
            <button disabled={isButtonDisabled(2)}>按钮2</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default TabComponent;