React.js className value with string interpolation

Question

I'm expressing a jsx template in the following way:

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

It works fine but in dev mode I'm seeing a lot of warnings about how the non-active li items have empty className properties, which it doesn't like. I tried doing:

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

but that fails to compile.

Is there a way to do this so the className doesn't get written if it's empty, or possibly the NavLink can take a parent prop or something that it will also set to active?

Answer 1

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

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