Agradecemos tu ayuda para difundir nuestros tutoriales con relación a las ciencias informáticas.
Solución:
¿Qué hay del operador ternario?
render()
return (
this.props.showMe ? : null
);
También puedes usar &&:
render()
return (
this.props.showMe &&
);
El bloque grande como en el comentario se puede manejar fácilmente envolviendo el JSX en ()s:
render()
return this.props.showMe && (
);
También en línea:
render()
return (
this.props.showMe &&
);
Dejo esto aquí con fines históricos. Consulte mis ediciones a continuación para obtener una solución mucho mejor después de haberlo desarrollado en React durante un tiempo.Terminé creando un componente NgIf (esto es nativo pero probablemente funcione para reaccionar)
Código:
import React, Component from "react";
class NgIf extends Component
render()
if (this.props.show)
return (
this.props.children
);
else
return null
export default NgIf;
Uso:
...
import NgIf from "./path/to/component"
...
class MyClass
render()
This Gets Displayed Soy nuevo en esto, por lo que probablemente se pueda mejorar, pero me ayuda en mi transición de Angular
EDITAR
Vea las ediciones a continuación para obtener una mejor explicación una vez que tuve más experiencia
Gracias al comentario de Jay a continuación, también hay una gran idea:
render()
this.props.value ? Yes : No
O
render()
this.props.value && Yes
Similar a algunas de las otras respuestas, pero funciona en línea, en lugar de usar todo el bloque / función de procesamiento, no requiere un componente especial, y puede usar una declaración else con el operador ternario. Además, los elementos contenidos en la instrucción if no arrojan un error si su objeto principal no existe. es decir, si si props.value no existe, entonces props.value.value2 no arrojará un error.
Vea esta respuesta https://stackoverflow.com/a/26152067
EDITAR 2:
Según el enlace anterior (https://stackoverflow.com/a/26152067) y después de mucha más experiencia en el desarrollo de aplicaciones de reacción, la forma anterior no es la mejor manera de hacer las cosas.
Los operadores condicionales en reaccionar son en realidad muy fáciles de entender. Hay dos formas de hacer las cosas:
//Show if someItem
someItem && displayThis
//Show if else
someItem ? displayThisIfTrue : displayThisIfFalse
Una advertencia que podría tener es si “someItem” no es una expresión booleana. Si dice 0, reaccionar imprimirá un 0 o reaccionar nativo le dará un error sobre la necesidad de envolver “0” en un elemento de texto. Por lo general, esto no es un problema para las pruebas falsas, pero presentará un problema para las pruebas veraces. Por ejemplo:
!someItem && displayThis //Will work just fine if item is 0 or null or "" etc
someItem && displayThis //Will print the value of someItem if its not falsy
¿Mi truco de uso frecuente? negativos dobles.
!!someItem && displayThis
Tenga en cuenta que esto no se aplica a los operadores ternarios (miVar? true : false) ya que implícitamente convierte el resultado en una expresión booleana.
Si también tiene otros elementos, puede envolver solo el condicional así:
render()
return (
Stuff
this.props.showMe && (
)
More stuff
);
Aquí puedes ver las reseñas y valoraciones de los usuarios
Al final de todo puedes encontrar las acotaciones de otros sys admins, tú de igual forma puedes mostrar el tuyo si te gusta.