la tercera manera
en el que podemos renderizar condicionalmente algunos JSX
o algún componente es mediante el uso de múltiples devoluciones.
Entonces, hasta este punto, todos nuestros componentes
Sólo he tenido exactamente una palabra clave de retorno, ¿verdad?
Pero no hay nada que nos detenga
de agregar otra palabra clave de retorno basada en alguna condición.
Entonces, por supuesto, cada componente
todavía solo puede devolver un bloque de JSX,
pero ese retorno puede depender de una condición.
En otras palabras, podemos hacer, por ejemplo, esto.
Entonces, aquí mismo, estamos fuera de JSX,
entonces simplemente estamos dentro del componente,
y aquí podemos escribir cualquier JavaScript que queramos.
Entonces, ahora podemos usar fácilmente las palabras clave if.
entonces podemos decir si no está abierto, entonces regresar,
por ejemplo, este mensaje aquí mismo.
Entonces, este JSX, pégalo aquí y eso es todo.
Entonces, si el restaurante no está abierto
entonces esto será devuelto.
Pero si se abre, entonces todo esto aquí no se ejecuta,
y luego simplemente se ejecutará nuestro retorno normal.
Lo importante aquí es que estos dos retornos
no puede suceder al mismo tiempo,
pero eso es ahora en resumen aquí,
así que pongámoslo nuevamente en 20.
Y ahora recibimos esto, exactamente este mensaje aquí mismo.
Entonces, no viene de aquí,
para que podamos reemplazar esto, pero lo dejaré aquí,
y te explicaré en un segundo por qué.
Pero de todos modos, esto en realidad viene de aquí,
y por supuesto podríamos hacer cualquier cosa aquí,
sólo para asegurarnos de que realmente proviene de allí.
Y sí, ahora el problema en este caso.
es que ya no estamos rindiendo
el elemento de pie de página alrededor de esta p,
Entonces, si quisiéramos hacer exactamente lo mismo,
También tendríamos que copiar el pie de página aquí, ¿no?
De lo contrario, el pie de página sólo se representaría
en caso de que el restaurante esté abierto.
Pero si no, no existiría ningún pie de página.
Entonces, esto es en realidad, en este caso,
no es lo que queremos, ¿vale?
Por lo general, este regreso temprano, como lo hicimos aquí,
es más útil cuando queremos
para renderizar componentes completos condicionalmente
pero no sólo algunas piezas de JSX.
Entonces, intentemos algo más aquí tal vez,
y lo que estoy buscando es en realidad este componente de pizza.
Entonces, recuerda que la pizza tiene la propiedad de estar agotada.
Entonces podemos ver eso aquí en los accesorios.
Entonces, cada pizza recibe este objeto de pizza ahora como accesorio.
y luego nos hemos agotado.
Entonces, lo que podemos hacer aquí como regreso anticipado es decir
si props.pizza object.soldOut, no devuelve nada.
Y así con esto entonces la pizza que se agotó.
no aparecerá en la interfaz de usuario,
y de hecho había una pizza.
Entonces, esa es ésta, Pizza Salamino,
y eso ya no está aquí ahora,
Y eso se debe a que aquí tenemos este regreso anticipado.
A veces esa es una técnica bastante común.
que podemos usar, que es simplemente devolver nulo,
así que nada en caso de que exista una determinada condición que sea cierta,
y en este caso, esto puede resultar bastante útil.
Así que por ahora dejemos esto aquí, aunque más adelante,
Haremos algo aún mejor con esta propiedad.
Entonces, como conclusión
de estas tres conferencias sobre representación condicional
mi recomendación es utilizar el operador de devolución siempre que
debe devolver alguna parte de JSX según una condición.
Entonces, solo por ejemplo, como este aquí.
Entonces, esto lo vamos a usar todo el tiempo.
pero también a veces simplemente quieres hacer algo como esto,
entonces quieres devolver algo completamente diferente
no importa si eso no es nada
o si eso es solo algún otro componente.
Así, por ejemplo, también podríamos decir aquí
algo que no tiene ningún sentido
pero intentemos esto.
Entonces, podríamos hacer esto.
Entonces, en caso de que esté agotado,
devolvimos el encabezado en este lugar.
Entonces, nuevamente aquí eso no tiene ningún sentido.
pero esa sería una posibilidad,
aunque no muy bueno.
Entonces, a lo largo de este curso aprenderás
cual de estas opciones es la mejor
simplemente practicándolos y usándolos
en diferentes situaciones una y otra vez.