javascript - React Hooks - 将 map() 函数中的类名仅设置为一项

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>
    )
}

标签： javascriptreactjsreact-hooks

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”属性