React：有条件地显示和隐藏 CSS 选择器 [重复]

【问题标题】：React: Conditionally show and hide CSS selector [duplicate]React：有条件地显示和隐藏 CSS 选择器 [重复]
【发布时间】：2020-03-26 16:25:33
【问题描述】：

如果 location = 'test'，我想应用 'side-nav--selected' 样式

const location = 'test';
...
<div className='side-nav--item {if location === 'test' && side-nav--selected'}>Test</div>
<div className='side-nav--item {if location === 'left' && side-nav--selected'}>Left</div>

我得到的错误是Parsing error: Identifier expected

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

<div className={`side-nav--item ${second === 'test' && 'side-nav--selected'}`}>...</div>
<div className={`side-nav--item ${second === 'left' && 'side-nav--selected'}`}>...</div>

使用三元运算符

<div className={`side-nav--item ${second === 'test' ? 'side-nav--selected' : '' }`}>...</div>
<div className={`side-nav--item ${second === 'left' ? 'side-nav--selected' : '' }`}>...</div>

【讨论】：

使用三元运算符会更好。如果条件second === 'test' 评估为false，则false 作为字符串将附加到类名。