如何为React代码创建复用函数实现active className逻辑

1. 抽离可复用的类名生成函数 #

把重复的类名判断逻辑封装成独立函数，传入目标语言标识、当前locale和样式对象，即可返回对应类名：

const getLangButtonClass = (targetLocale: string, currentLocale: string, styles: typeof styles): string => {
  return currentLocale === targetLocale 
    ? `${styles.langButton} ${styles.active}` 
    : styles.langButton;
};

2. 简化JSX中的类名调用 #

直接在按钮的className属性中调用该函数，替代原本重复定义的变量：

<>
  <button className={getLangButtonClass('en', router.locale, styles)}>
    EN
  </button>
  <button className={getLangButtonClass('de', router.locale, styles)}>
    DE
  </button>
</>

3. 进阶优化：数组遍历批量渲染按钮 #

如果后续需要新增更多语言，可将语言配置做成数组，通过循环渲染进一步减少重复代码：

const languages = [
  { code: 'en', label: 'EN' },
  { code: 'de', label: 'DE' }
];

<>
  {languages.map(lang => (
    <button 
      key={lang.code}
      className={getLangButtonClass(lang.code, router.locale, styles)}
    >
      {lang.label}
    </button>
  ))}
</>

后续新增语言时，仅需在languages数组中添加对应条目即可，无需重复编写按钮结构与类名判断逻辑。

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