javascript - React:有条件地显示和隐藏 CSS 选择器
问题描述
如果 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
解决方案
<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>
推荐阅读
- javascript - javascript中for循环和本地存储的问题
- python - 在 Python 中使用带有 Selenium 的默认 Chrome 配置文件
- amazon-web-services - AWS Cloudfront 可用性 SLA
- r - 异方差残差图与 Pinhiero 和 Bates 中显示的图不匹配
- pandas - 使用 Keras flow_from_dataframe 进行图像分类
- javascript - 如何在浏览器的提示中获取输入值
- java - 将 CSV 文件读入不同类型的数组,然后读入 Arraylist
- powershell - 计算压缩文件中的内容
- react-native - React-native Webview 历史
- reactjs - react项目的bundle.js在哪里