React -仅将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和字符串定义后的{}块。还请注意Home组件上的"key“属性