React导航栏Tabs组件onClick的ESLint与TypeScript错误解决咨询

问题根源 #

• 使用箭头函数触发点击：onClick={() => handleTabClick(0)} 每次渲染都会生成新函数实例，触发ESLint的react/jsx-no-bind警告。
• 直接调用函数：onClick={handleTabClick(0)} 会在组件渲染时立即执行函数，返回void，不符合MouseEventHandler<HTMLButtonElement>的类型要求，触发TypeScript错误。

两种正确实现方式 #

方式一：用useCallback创建事件处理工厂函数

让handleTabClick返回一个绑定了标签索引的事件处理函数，同时用useCallback缓存工厂函数本身，避免不必要的重创建：

import { useState, useCallback } from 'react';

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

  // 缓存工厂函数，每次渲染不会重新创建
  const handleTabClick = useCallback((tabIndex: number) => {
    return (e: React.MouseEvent<HTMLButtonElement>) => {
      setActiveTab(tabIndex);
    };
  }, []);

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

export default Tabs;

方式二：利用data属性传递索引

将标签索引存储在按钮的自定义data属性中，点击时从事件对象中读取该值，无需在JSX中传递参数：

import { useState, useCallback } from 'react';

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

  // 单一事件处理函数，通过data属性获取索引
  const handleTabClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
    const tabIndex = parseInt(e.currentTarget.dataset.tabIndex || '0', 10);
    setActiveTab(tabIndex);
  }, []);

  return (
    <div className="tabs">
      <button 
        onClick={handleTabClick} 
        data-tab-index="0"
        className={activeTab === 0 ? 'active' : ''}
      >
        Tab 1
      </button>
      <button 
        onClick={handleTabClick} 
        data-tab-index="1"
        className={activeTab === 1 ? 'active' : ''}
      >
        Tab 2
      </button>
    </div>
  );
};

export default Tabs;

两种方式对比 #

• 方式一更直观，参数传递清晰，适合标签数量较少的场景。
• 方式二复用单一事件处理函数，避免创建多个函数实例，性能更优（虽对Tabs组件影响微小，但符合最佳实践）。

内容的提问来源于stack exchange，提问作者NewBieJavaPro