La declaración condicional devuelve falso cada vez, incluso si "debería" devolver verdadero ...
const Navy = () => { const [content, setContent] = useState(<Today/>) const homepage = () => { setContent(<Today/>); } const accountpage = () => { setContent(<Account/>); } return( <Nav > <ul className='menuItems'> <div className='mainmenu'> <Nav.Link className='linkitem' style={{color: content === useState(<Today/>) ? 'red' : 'blue'}}> <li onClick={homepage}> <i class="fa fa-home" aria-hidden="true"></i> Home <div className='arrow'> <i class="fa fa-angle-double-right" ></i> </div> </li> </Nav.Link> <Nav.Link className='linkitem' style={{color: content === useState(<Today/>) ? 'red' : 'blue'}}> <li onClick={accountpage}> <i class="fa fa-cog" aria-hidden="true"></i> Account <div className='arrow'> <i class="fa fa-angle-right"></i> </div> </li> </Nav.Link> </div> <ul/> </Nav> )}Mi objetivo es hacer que esta línea sea verdadera si el componente está actualmente en uso (actualmente devuelve falso independientemente):
<Nav.Link className='linkitem' style={{color: content === useState(<Today/>) ? 'red' : 'blue'}}><Today /> es una instancia de su Componente: cada vez que llama a <Today /> crea un objeto nuevo y diferente. En cualquier caso, debe comparar content , no useState(content)
Puede probar una solución complicada (no probada) como:
content.constructor.name === 'Today' ? ...De lo contrario, puede cambiar el estado como una bandera:
const [content, setContent] = useState('today')entonces, la comparación seguro funciona, y puedes elegir el renderizado con:
content === 'today' ? <Today> : <Account>Pero le sugiero una solución más limpia con React router DOM .
Y entonces:
const YourComponent = () => { const location = useLocation(); ... return <> // when you want to select color matchPath(location, {path: '/today'}) ? 'color1' : 'color2' // when you choose what component show <Switch> <Route exact path="/today"> <Today> </Route> <Route exact path="/account"> <Account> </Route> </Switch> </>useState (algo) siempre te da una matriz que contiene 2 cosas
por lo que está comparando con valor con una matriz que contiene [valor, actualizarValorFunción]
ingrese la descripción de la imagen aquí
Se agregó una imagen.
Si intenta comparar el contenido y useState()[0], aún tendrá algunas diferencias con los 2 objetos completos.
Por lo tanto, aún debe verificar si los dos son iguales, verifique el contenido. escriba === useState () [0]. escriba ingrese la descripción de la imagen aquí
