React 的条件语句中未应用“活动”样式

Question

My file throws an error that says 'active' is not defined when I write this conditional statement for my className:

const NavigationItem = (props) => (
<li className='NavigationItem'>
<a href={props.link} 
className={props.active ? active : null}>{props.children}
</a>
</li>)

This is how I'm writing my component and passing active:

<NavigationItem link='/' active >Builder</NavigationItem>

I tried importing classes and doing classes.active in the className declaration and while that gets rid of the error the active is not applied.

Answer 1

const NavigationItem = (props) => (
<li className='NavigationItem'>
<a href={props.link} 
className={props.active ? 'active' : null}>{props.children}
</a>
</li>)

you need turn active to string:D