尝试通过状态将类添加到列表项元素时解析错误

Question

我有一个 React 应用程序，我正在使用钩子 useState 和 useCallback 来控制页面之间的导航。

这部分有效，但我想突出显示当前页面链接。

因此添加了一个名为“chosen”的新状态元素，它使用“setChosen”进行设置。

const [chosen, setChosen] = useState();
const [showGameViewer, setGamerViewer] = useState(false);
const [showGameCreator, setGameCreator] = useState(false);

然后在我的useCallback中，我使用setChosen：

const handleLinkMenuClick = useCallback(e => { setGamerViewer(false) || (setGameCreator(true) && setChosen(true))});

我的链接看起来像这样，我正在尝试将名为“current”的 CSS 类附加到 className：

<li className="nav-item " {chosen && "current"}>
    <a className="nav-link" href="#" onClick={handleLinkMenuClick}>Show Game Creator</a>
</li>

还有我的 CSS：

.chosen {
    background: yellow;
}

但我收到上述代码 {chosen && "current"} 的错误：

const chosen is undefined. Parsing Error: Unexpected token

我不确定它为什么这么说。我在上面定义了“选择”。所以它应该知道。

有人看出什么不对了吗？

Answer 1

你可以有条件地渲染它

<li className={`nav-item ${chosen ? 'current' : ''}`}>
    <a className="nav-link" href="#" onClick={handleLinkMenuClick}>Show Game Creator</a>
</li>

我认为你想添加当前的 CSS，所以你应该把它写成

.current {
    background: yellow;
}