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

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 类附加到类名中：

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

还有我的 css：

.chosen {
background: yellow;
}

但是我收到上述代码{选择&&"当前"}的错误，上面写着：

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