React Hooks-只将map()函数中的className设置为一个项

Question

我正在映射一个项目列表，当单击其中一个项目时，我想将其颜色更改为粉红色。我使用钩子来设置状态，但问题是，当一个项目被点击时，它们都会变成粉红色(所以都被分配了className.

const ButtonCustom = () => {
const [menuState, setMenuState] = React.useState(false);
let className = "RichEditor-styleButton"
{
menuActive === true?
className += " RichEditor-styleButton-active":(null)
}
return (
<span
className={className}
onClick={() => setMenuState(!menuActive)}
>
{value}
</span>
);
}

const Home = () => {
return(
<div>
{items.map((button) => {
return ButtonCustom();
})}
</div>
)
}

Answer 1

这是一个奇怪的语法。我会这样重写：

const ButtonCustom = () => {
const [menuActive, setMenuActive] = React.useState(false);
let className = "RichEditor-styleButton"
if (menuActive === true) {
className += " RichEditor-styleButton-active";
}
return (
<span
className={className}
onClick={() => setMenuActive(active=>!active)}
>
{value}
</span>
);
}

const Home = () => {
return(
<div>
{items.map((button, index) => {
return <ButtonCustom key={index}/>;
})}
</div>
)
}

主要关注不明确的menuActive/menuState和字符串定义后的｛｝块。还要注意"；键"；主页组件上的属性