React中实现多语言按钮点击切换语言及独立样式变更问题

问题说明 #

我通过.map函数创建了两个用于切换语言的按钮，结合i18next实现页面语言切换功能。点击对应语言按钮时，希望同时完成页面语言切换和该按钮的样式修改（比如将背景设为白色）。但用useState实现时出现了两个按钮样式同时变更的问题，相关代码如下：

const languages = [
  {
    code: 'en',
    name: 'English',
    country_code: 'gb',
    emoji: '🇬🇧'
  },
  {
    code: 'uk',
    name: 'Українська',
    country_code: 'ua',
    emoji: '🇺🇦'
  }
]

const Langbar = () => {
  const { t, i18n } = useTranslation();
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(current => !current);
  };
  return (
    <div className='container langbar_container'>
      <h3>{t('language')}</h3>
      {languages.map(({code, emoji}) => (
        <button 
          onClick={() => {i18next.changeLanguage(code); handleClick}}
          className="btn btn-secondary langbar_btn"
          style={{
            background: isActive ? 'white' : ''
          }}>
          <span>{emoji}</span>
        </button>
      ))}
    </div>
  )
}

问题原因 #

当前用单个布尔值isActive控制所有按钮的样式，所有按钮共享同一个状态变量，点击时会同时触发所有按钮的样式变更，无法区分哪个是当前激活的语言按钮。

解决方案 #

将状态从布尔值改为存储当前激活的语言代码，通过对比按钮的语言代码和激活状态的代码，来单独控制对应按钮的样式：

const languages = [
  {
    code: 'en',
    name: 'English',
    country_code: 'gb',
    emoji: '🇬🇧'
  },
  {
    code: 'uk',
    name: 'Українська',
    country_code: 'ua',
    emoji: '🇺🇦'
  }
]

const Langbar = () => {
  const { t, i18n } = useTranslation();
  // 初始值设为当前i18n的语言，确保页面加载时按钮状态正确
  const [activeLang, setActiveLang] = useState(i18n.language);

  const handleLangChange = (code) => {
    i18n.changeLanguage(code);
    setActiveLang(code);
  };

  return (
    <div className='container langbar_container'>
      <h3>{t('language')}</h3>
      {languages.map(({code, emoji}) => (
        <button 
          key={code} {/* 给map元素添加唯一key */}
          onClick={() => handleLangChange(code)}
          className="btn btn-secondary langbar_btn"
          style={{
            background: code === activeLang ? 'white' : ''
          }}>
          <span>{emoji}</span>
        </button>
      ))}
    </div>
  )
}

关键修改点 #

1. 状态类型调整：把isActive布尔值改为activeLang字符串，存储当前激活的语言代码（如en/uk）
2. 初始状态优化：用i18n.language作为初始值，页面加载时自动匹配当前语言的按钮样式
3. 点击逻辑合并：将语言切换和状态更新合并到同一个函数handleLangChange，避免原代码中handleClick未调用的问题
4. 样式判断逻辑：每个按钮通过code === activeLang判断是否应用激活样式，确保只有当前选中的按钮改变背景
5. 添加唯一key：给map生成的按钮添加key={code}，符合React列表渲染规范

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