在react上仅切换一个li元素

Question

我想在项目中的活动元素之间切换颜色，但这样一来，它们都会在点击时更改样式，我该如何解决这个问题？谢谢

function Language() {

const [style, setStyle] = useState(false);

const changeStyle = () => {   
setStyle(!style);
};
return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }) => (
<li key={country_code}>
<h4 onClick={() => {i18next.changeLanguage(code); changeStyle()}} className={style ? "cont" : "cont2"}>{name}</h4>
</li>
))}
</ul>
</>
);
}

Answer 1

您可以尝试使用活动元素的索引作为状态，而不是使用布尔值作为状态：

function Language() { 
const [active, setActive] = useState(-1); // -1 represents no active element

const changeStyle = (index) => {   
setStyle(index);
};
return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }, i) => ( // get index as i
<li key={country_code}>
<h4 onClick={() => {i18next.changeLanguage(code); changeStyle(i)}} className={active === i ? "cont" : "cont2"}>{name}</h4>
</li>
))}
</ul>
</>
);
}

然后，您将能够检查此li的索引是否与活动索引相同。

Answer 2

您可以将活动li的代码设置为状态值，并检查状态值是否等于li的代码值或任何其他唯一值。

function Language() {
const [active, setActive] = useState('');      
const changeStyle = (code) => setActive(code)

return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }) => (
<li key={country_code}>
<h4 
onClick={()=>{
i18next.changeLanguage(code);
changeStyle(code)
}} 
className={active===code && "active" }>
{name}
</h4>
</li>
))}
</ul>
</>
);
}