Hoy, en la traducción de la próxima parte del curso de capacitación React, le presentamos la segunda lección sobre representación condicional y un taller sobre este tema.
→
Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX→
Parte 2: componentes funcionales→
Parte 3: archivos de componentes, estructura del proyecto→
Parte 4: componentes principales y secundarios→
Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo→
Parte 6: sobre algunas características del curso, JSX y JavaScript→
Parte 7: estilos en línea→
Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes→
Parte 9: propiedades del componente→
Parte 10: Taller sobre trabajo con propiedades de componentes y estilo→
Parte 11: generación de marcado dinámico y método de matrices de mapas→
Parte 12: taller, tercera etapa de trabajo en una aplicación TODO→
Parte 13: componentes basados en clases→
Parte 14: taller sobre componentes basados en la clase, estado de los componentes.→
Parte 15: talleres de componentes de salud→
Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos→
Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes→
Parte 18: la sexta etapa de trabajo en una aplicación TODO→
Parte 19: métodos del ciclo de vida de los componentes.Parte 20: la primera lección de representación condicional→
Parte 21: segunda lección y taller sobre representación condicional→
Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas→
Parte 23: primera lección sobre trabajar con formularios→
Parte 24: Segunda lección de formularios→
Parte 25: Taller sobre trabajo con formularios→
Parte 26: arquitectura de la aplicación, patrón de contenedor / componente→
Parte 27: proyecto del cursoLección 37. Representación condicional, parte 2
→
OriginalEn el tutorial de hoy sobre renderizado condicional, hablaremos sobre el uso del operador lógico
&& (Y). Experimentaremos con un proyecto estándar creado por create-react-app, en el archivo
App.js en el que se encuentra el siguiente código:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { unreadMessages: [ "Call your mom!", "New spam email available. All links are definitely safe to click." ] } } render() { return ( <div> <h2>You have {this.state.unreadMessages.length} unread messages!</h2> </div> ) } } export default App
Ahora la aplicación se ve en el navegador como se muestra a continuación.
Página de aplicación en el navegadorEs posible que ya haya utilizado el operador
&& en construcciones como
true && false (que da
false ). Para que se devuelva una expresión
true como resultado del cálculo de dicha expresión, debe verse como
true && true . Al procesar tales expresiones, JavaScript determina si su lado izquierdo es verdadero y, de ser así, simplemente devuelve lo que está en su lado derecho. Si
false && false procesa una expresión de la forma
false && false , se devolverá
false inmediatamente, sin marcar el lado derecho de la expresión. Como resultado, el operador
&& se puede utilizar en la representación condicional. Con él, puede devolver algo que se mostrará en la pantalla o no devolver nada.
Analicemos el código de la aplicación de entrenamiento.
El estado del componente
App almacena una serie de cadenas de
unreadMessages . Cada fila de esta matriz representa un mensaje no leído. La página muestra el número de mensajes no leídos, determinados en función de la longitud de la matriz. Si esta matriz está vacía, es decir, no habrá un solo elemento en ella, entonces la aplicación mostrará lo que se muestra a continuación en la página.
La aplicación nos informa que no hay mensajes no leídosPara lograr este efecto, es suficiente llevar la matriz a este formulario:
unreadMessages: [] .
Si no hay mensajes no leídos, es completamente posible no mostrar ningún mensaje. Si utilizamos el operador ternario del que hablamos la
última vez para implementar este comportamiento de la aplicación, el método
render() del componente
App puede reescribirse de la siguiente manera:
render() { return ( <div> { this.state.unreadMessages.length > 0 ? <h2>You have {this.state.unreadMessages.length} unread messages!</h2> : null } </div> ) }
Ahora, si la matriz
unreadMessages vacía, no se mostrará nada en la página. Pero el código presentado aquí puede simplificarse utilizando el operador
&& . Así es como se vería:
render() { return ( <div> { this.state.unreadMessages.length > 0 && <h2>You have {this.state.unreadMessages.length} unread messages!</h2> } </div> ) }
Si hay algo en la matriz, el lado derecho de la expresión se muestra en la página. Si la matriz está vacía, no se muestra nada en la página.
Esto no quiere decir que usar el operador
&& en la representación condicional es absolutamente necesario, ya que se puede lograr el mismo efecto usando un operador ternario que devuelve
null si la condición que prueba es falsa. Pero el enfoque presentado aquí simplifica el código y, además, se usa con bastante frecuencia, por lo que puede encontrarlo mientras lee los programas de otras personas.
Lección 38. Taller. Representación condicional
→
Original▍Trabajo
Aquí está el código del componente funcional de la
App , que se almacena en el archivo
App.js de un proyecto estándar creado usando create-react-app.
import React from "react" function App() { return ( <div> Code goes here </div> ) } export default App
Debes hacer lo siguiente:
- Convierta el código del componente para equiparlo con el estado.
- Asegúrese de que el estado del componente contenga información sobre si el usuario "inició sesión" o no (en este ejercicio, "iniciar sesión" en el sistema y "cerrar sesión" significa solo cambiar el valor correspondiente almacenado en el estado).
- Agregue a la página que el componente forma un botón que permite al usuario iniciar y cerrar sesión.
- Esta es una tarea adicional. Asegúrese de que si el usuario no ha iniciado sesión, el botón mostrará
LOG IN y, si está conectado, LOG OUT .
- En la página formada por el componente,
Logged in si el usuario ha iniciado sesión y Logged out si no Logged out .
Si ahora siente que es difícil comenzar a resolver estos problemas, eche un vistazo a los consejos y luego comience a trabajar.
▍Consejos
Para completar esta tarea, debe recordar gran parte de lo que hablamos en las clases anteriores. Para empezar, un componente que puede tener estado debe ser un componente basado en una clase. Este componente debe tener un constructor. En el estado del componente, puede almacenar una propiedad lógica, por ejemplo, se puede llamar
isLoggedIn ,
isLoggedIn valor,
true o
false , indica si el usuario ha iniciado sesión o no. Para que el botón que debe agregarse a la página generada por la aplicación pueda realizar sus funciones, necesitará un
onClick eventos
onClick . Para mostrar diferentes textos, en función del valor cambiante del estado, será necesario recurrir a la tecnología de representación condicional.
▍Solución
Transformamos el componente funcional disponible en el código en el componente basado en una clase. Necesitamos esto por varias razones. Primero, necesitamos trabajar con el estado de la aplicación. En segundo lugar, necesitamos un controlador de eventos que se llama cuando se hace clic en un botón. En principio, puede escribir una función independiente y usarla para manejar eventos de botón, pero prefiero describir controladores dentro de las clases de componentes.
Así es como se verá el código para un componente funcional convertido a un componente basado en clases. Aquí, en el constructor de componentes, describimos su estado inicial, que contiene la propiedad
isLoggedIn establecida en
false .
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } } render() { return ( <div> Code goes here </div> ) } } export default App
El código anterior es una solución para la primera y segunda parte de la tarea. Ahora trabajaremos para agregar un botón a la página que muestra el componente. Hasta ahora, este botón mostrará la misma inscripción independientemente de lo que esté almacenado en el estado de la aplicación. Lo equiparemos con un controlador de eventos, colocando en él, para verificar la operatividad de nuestro código, un comando simple para enviar un mensaje a la consola. Además, nosotros, en el constructor de componentes, vincularemos este controlador a
this , lo que nos será útil cuando, en el código de este controlador, accedamos a los mecanismos diseñados para trabajar con el estado del componente. Ahora el código se ve a continuación.
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { console.log("I'm working!") } render() { return ( <div> <button onClick={this.handleClick}>LOG IN</button> </div> ) } } export default App
Cuando haces clic en el botón
LOG IN ,
I'm working! .
Ahora recordemos que cuando hacemos clic en el botón, la propiedad
isLoggedIn almacenada en el estado
isLoggedIn de
true a
false y viceversa. Para hacer esto, en el controlador de clic de botón, deberá llamar a la función
this.setState() , que se puede usar de dos maneras. Es decir, se puede proporcionar, en forma de un objeto, una nueva idea de lo que debe estar contenido en el estado. La segunda variante de su uso proporciona la transferencia de una función que toma el estado anterior del componente y forma uno nuevo, devolviendo, nuevamente, el objeto. Haremos exactamente eso. Eso es lo que obtuvimos en esta etapa del trabajo.
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { return ( <div> <button onClick={this.handleClick}>LOG IN</button> </div> ) } } export default App
Aquí podríamos usar la construcción if-else, ¡pero solo convertimos
true a
false y
false a
true usando el operador lógico
! (NO)
Hasta ahora, no tenemos ningún mecanismo que, en función de lo que se almacena en el estado, nos permita influir en el aspecto de la aplicación. Por lo tanto, ahora resolveremos la tarea adicional de la tarea número 3. Es decir, haremos que la etiqueta del botón cambie según el estado del componente. Para lograr esto, puede declarar una variable en el método
render() cuyo valor,
LOG IN o
LOG OUT , depende de lo que esté almacenado en el estado. Este valor se puede usar como texto de botón. Así es como se ve.
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN" return ( <div> <button onClick={this.handleClick}>{buttonText}</button> </div> ) } } export default App
Ahora tomemos la cuarta parte de la tarea. Mostraremos texto en la página dependiendo de si el usuario ha iniciado sesión o no. De hecho, considerando todo lo que ya está presente en el código del componente, resolver este problema es muy simple. A continuación se muestra el código terminado para el archivo
App.js import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN" let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out" return ( <div> <button onClick={this.handleClick}>{buttonText}</button> <h1>{displayText}</h1> </div> ) } } export default App
Así es como se ve la aplicación en el navegador.
Página de aplicación en el navegadorAl hacer clic en el botón
LOG IN se muestra en la figura anterior, se cambia el estado de la aplicación, después de lo cual se muestra
LOG OUT en el botón y se muestra el texto en la página informando al usuario que ha iniciado sesión.
Resumen
Hoy continuamos hablando sobre renderizado condicional, examinamos el uso del operador
&& y completamos una tarea práctica que involucra muchos de los mecanismos que estudiamos. La próxima vez, continuará trabajando en la aplicación Todo y en un nuevo tema.
Estimados lectores! ¿Has hecho frente a la tarea práctica de hoy?