为 React 中选择的菜单用户设置“活动”类名

Question

就像上面的屏幕截图一样，我正在使用 Semantic-UI，其中选定的菜单会突出显示。 正如我下面的代码，我已将状态设置为用户单击的任何菜单。我下面的代码工作正常，但我认为这是编写代码的低效方式，因为我基本上每次渲染时都调用两个函数只是为了更改类名的切换。

有没有更好的方法来实现这一点？

请指教。

const Navigation = () => {
  const [selected, setSelected] = useState("Comments");

  const onSelection = (e) => {
    setSelected(e.target.textContent);
  };

  const commentActive = () => {
    return selected === "Comments" ? "active" : "";
  };

  const searchActive = () => {
    return selected === "Search" ? "active" : "";
  };

  return (
    <div className="ui secondary pointing menu">
      <a className={`item ${commentActive()}`} onClick={(e) => onSelection(e)}>
        Comments
      </a>
      <a className={`item ${searchActive()}`} onClick={(e) => onSelection(e)}>
        Search
      </a>
    </div>
  );
};

Answer 1

我认为您不应该将布尔条件 selected === 'Comments' 硬编码为容易出现错误，因为如果您决定更改锚点的上下文而不更改条件，您可能会遇到错误：target.textContent !== 'Comments';

改为使用枚举：

const NAV_SECTIONS = {
  COMMENTS: "comments",
  SEARCH: "search",
};

const Navigation = () => {
  const [selected, setSelected] = useState(NAV_SECTIONS.COMMENTS);

  return (
    <div className="ui secondary pointing menu">
      <a
        className={`item ${selected === NAV_SECTIONS.COMMENTS ? "active" : ""}`}
        onClick={() => setSelect(NAV_SECTIONS.COMMENTS)}
      >
        {/* We changed the content and the code didn't break */}
        My Cool Comments
      </a>
      <a
        className={`item ${selected === NAV_SECTIONS.SEARCH ? "active" : ""}`}
        onClick={() => setSelect(NAV_SECTIONS.SEARCH)}
      >
        My Best Search
      </a>
    </div>
  );
};