带有字符串插值的 React.js 类名值答案

【问题标题】：React.js className value with string interpolation带有字符串插值的 React.js 类名值
【发布时间】：2020-08-28 20:30:10
【问题描述】：

我用以下方式表达jsx 模板：

// looping here
<li key={some_key} className={props.location.pathname.includes(path) && 'active'}>
<NavLink to={path}>{path.name}</NavLink>
// end loop

它工作正常，但在开发模式下，我看到很多关于非活动 li 项目如何具有空的 className 属性的警告，这是它不喜欢的。我试着做：

<li key={some_key} {props.location.pathname.includes(path.path) ? 'className="active"' : ''}>

但是编译失败。

有没有办法做到这一点，如果 className 为空，则不会写入它，或者 NavLink 可以采用父道具或其他东西，它也将设置为活动状态？

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您可以按如下方式使用字符串插值：

 <li key={some_key} className={`${props.location.pathname.includes(path)?'active':''}`}>

【讨论】：