por favor ayúdenme a entender esto: estoy haciendo una representación condicional en react-native algo como esto
{state.sign && (<Image style={{height:200,width:100}} source{{uri:state.sign}})}se procesa sin problemas, tengo esto en stacknavigation y cuando trato de navegar a la raíz con navigation.popToTop()
esto arroja un error. Sin embargo, cuando lo cambio a
{ state.sign ? (<Image style={{height:200,width:100}} source{{uri:state.sign}}): null}funciona . hay algo que no estoy entendiendo. algo donde "&&" se monitorea continuamente y "?:" se procesa una vez y se elimina el polvo?
¿Probablemente olvidaste cerrar la etiqueta?
<Image style={styles.tinyLogo} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} />En su mayor parte, no hay mucha diferencia entre los dos, pero un caso de uso en el que importa es cuando se trata del valor de retorno de la representación. Los componentes de React pueden representar un JSX válido o un null para indicar que no se representará nada, y los valores booleanos se ignoran. No se permite devolver undefined .
&&Esto se usa si desea incluir condicionalmente algunos JSX con el resto del JSX renderizado.
Ejemplo
return ( <> <h1>A Header</h1> <div>Some text on the page</div> {state.sign && ( <Image style={{height: 200, width: 100}} source{{ uri:state.sign }} /> )} </> );Esto se usa si desea renderizar condicionalmente un JSX u otro JSX junto con el resto del JSX renderizado.
Ejemplo:
return ( <> <h1>A Header</h1> <div>Some text on the page</div> {state.sign ? ( <Image style={{height: 200, width: 100}} source{{ uri:state.sign }} /> ) : ( <div>There is nothing to see here!</div> )} </> ); En casos excepcionales, es posible que desee que un componente se oculte aunque haya sido renderizado por otro componente. Para hacer esto, devuelva null en lugar de su salida de renderizado.
Aquí es donde importa la diferencia si lo que está tratando de representar condicionalmente es el valor de retorno de un componente.
Inválido porque no devuelve null para representar nada:
return state.sign && ( <Image style={{height: 200, width: 100}} source{{ uri:state.sign }} /> );Válido:
return state.sign ? ( <Image style={{height: 200, width: 100}} source{{ uri:state.sign }} /> ) : null;