React中如何实现仅切换单个li元素的激活样式？

你当前的问题在于用了一个全局布尔状态style来控制所有列表项的类名，点击任何一项都会翻转这个状态，导致所有<li>的样式同时变化。要解决这个问题，需要把状态改成记录当前激活的语言标识，而非全局布尔值，这样就能精准控制单个元素的样式。

修改方案： #

1. 替换状态变量：把控制样式的布尔状态改为记录当前激活语言的code（或country_code），初始值可以设为当前已激活的语言（i18next.language），确保初始状态正确。
2. 更新点击逻辑：点击列表项时，不仅切换语言，还要将当前项的code设为激活状态值。
3. 调整类名判断：只有当当前项的code与激活状态值匹配时，才应用激活样式类cont，否则用cont2。

修改后的完整代码： #

function Language() {
  // 初始值设为当前已激活的语言，确保页面加载时样式正确
  const [activeLang, setActiveLang] = useState(i18next.language);
  
  const handleLangChange = (code) => {
    i18next.changeLanguage(code);
    setActiveLang(code);
  };

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }) => (
          <li key={country_code}>
            <h4 
              onClick={() => handleLangChange(code)} 
              className={activeLang === code ? "cont" : "cont2"}
            >
              {name}
            </h4>
          </li>
        ))}
      </ul>
    </>
  );
}

这样修改后，点击某个语言项时，只有该项会切换到激活样式，其他项保持默认样式，完美解决批量变化的问题。

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