Hoy, en la décima parte de la traducción del curso de capacitación React, le sugerimos que complete una tarea práctica sobre cómo trabajar con las propiedades de los componentes y sobre cómo diseñarlos.
→
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 20. Taller. Propiedades de componentes, estilo
→
Original▍Trabajo
- Cree un nuevo proyecto de aplicación React.
- Muestre el componente de la aplicación en la página de la aplicación, cuyo código debe estar en un archivo separado.
- El componente de la aplicación debería generar 5 componentes de
Joke que contienen bromas. Saque estos componentes de la manera que desee. - Cada componente de
Joke debe aceptar y procesar la propiedad de la question , para la parte principal de la broma, y la propiedad punchLine , para su frase clave.
▍ Tarea adicional
Algunos chistes consisten enteramente en una frase clave. Por ejemplo: "Es difícil explicar los juegos de palabras a los cleptómanos porque siempre toman las cosas literalmente". Considere cómo el componente
Joke solo puede mostrar la propiedad
punchLine , si la propiedad de la
question no está establecida. Experimente con el estilo de sus componentes.
▍Solución
Tarea principal
El archivo
index.js se verá bastante familiar:
import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />, document.getElementById("root"))
Aquí está el código para el archivo
App.js :
import React from "react" import Joke from "./Joke" function App() { return ( <div> <Joke question="What's the best thing about Switzerland?" punchLine="I don't know, but the flag is a big plus!" /> <Joke question="Did you hear about the mathematician who's afraid of negative numbers?" punchLine="He'll stop at nothing to avoid them!" /> <Joke question="Hear about the new restaurant called Karma?" punchLine="There's no menu: You get what you deserve." /> <Joke question="Did you hear about the actor who fell through the floorboards?" punchLine="He was just going through a stage." /> <Joke question="Did you hear about the claustrophobic astronaut?" punchLine="He just needed a little space." /> </div> ) } export default App
Tenga en cuenta que, dado que el archivo del componente
Joke se encuentra en la misma carpeta que el archivo del componente
App , lo importamos con el
import Joke from "./Joke" . Devolvemos varios elementos de la
App , por lo que debemos ajustar toda la salida en una determinada etiqueta, por ejemplo, en la
<div> . A las instancias de componentes, pasamos la
question y
punchLine .
Aquí está el código para el archivo
Joke.js :
import React from "react" function Joke(props) { return ( <div> <h3>Question: {props.question}</h3> <h3>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
Aquí, al declarar la función
Joke , especificamos el parámetro
props . Recuerde que es un nombre que se usa de acuerdo con la tradición establecida. De hecho, puede ser cualquier cosa, pero es mejor llamarlo
props .
Devolvemos varios elementos del componente, por lo tanto, están encerrados en la
<div> . Usando las
props.punchLine props.question y
props.punchLine accedemos a las propiedades pasadas a la instancia del componente cuando se creó. Estas propiedades se convierten en propiedades del objeto de
props . Están encerrados entre llaves debido al hecho de que el código JavaScript utilizado en el marcado JSX debe estar entre llaves. De lo contrario, el sistema tomará los nombres de las variables como texto sin formato. Después de un par de elementos
<h3> , en uno de los cuales se muestra el texto principal del chiste, y en el otro, su frase clave, está el elemento
<hr/> que describe la línea horizontal. Dichas líneas se mostrarán después de cada broma, separándolas.
Así es como se ve el proyecto de aplicación en VSCode.
Aplicación en VSCodeAquí está la página de la aplicación.
Página de aplicación en el navegadorTarea adicional
Recuerde que el objetivo principal de la tarea adicional es organizar la conclusión correcta de los chistes, que consisten completamente en una frase clave. Esto se expresa en el hecho de que al crear una instancia del componente
Joke , solo se le
punchLine propiedad
punchLine y no se
punchLine la propiedad de la
question . La creación de una instancia de dicho componente se ve así:
<Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />
Si coloca este código en la parte superior del código devuelto por el componente de la aplicación, la página de la aplicación se verá así.
Página de aplicación formada incorrectamenteObviamente, el problema aquí es que, aunque la propiedad de la
question no se pasa al componente, muestra texto que precede a la parte principal de cada broma, después de lo cual no se emite nada.
Mirando hacia el futuro, notamos que en futuras partes del curso hablaremos sobre la representación condicional. Usando este enfoque para renderizar, puede resolver efectivamente problemas como el nuestro. Mientras tanto, trataremos de utilizar los medios de diseño de páginas. Es decir, haremos que si la propiedad de la
question no se pasa al componente, el fragmento correspondiente del marcado JSX devuelto por él no se muestre en la página. Aquí está el código completo para el componente
Joke , que implementa uno de los posibles enfoques para resolver nuestro problema usando CSS:
import React from "react" function Joke(props) { return ( <div> <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3> <h3>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
<h3> estilo al primer elemento
<h3> , que se determina durante la creación de instancias del componente en función de la presencia de la propiedad
props.question en el objeto. Si esta propiedad está en el objeto, el elemento toma el estilo de
display: block y se muestra en la página; de lo contrario,
display: none y no se muestra en la página. El uso de tal construcción conducirá al mismo efecto:
<h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>
Aquí, el estilo
display: none se asigna al elemento si el objeto
props no tiene la propiedad
question , de lo contrario no se asigna nada a la propiedad
display .
Ahora la página de la aplicación en el navegador se verá como la que se muestra a continuación.
Manejo adecuado de componentes de una situación en la que no se le pasa la propiedad de la preguntaPuede notar que todos los elementos formados por el componente
Joke ven iguales. Pensemos cómo seleccionar aquellos que solo pasan la propiedad
punchLine . Resolveremos este problema utilizando los estilos integrados y el enfoque que examinamos anteriormente. Aquí está el código actualizado para el componente
Joke :
import React from "react" function Joke(props) { return ( <div> <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3> <hr/> </div> ) } export default Joke
Y aquí está lo que ahora aparece en la página de la aplicación.
Diseñar un elemento diferente de los demásAhora que hemos trabajado en el componente
Joke , se ha vuelto más versátil y más adecuado para su reutilización.
Resumen
En esta lección práctica, estábamos desarrollando habilidades para transferir propiedades a los componentes. Si analiza el código en el ejemplo dado aquí, notará que para generar varios bloques de marcado similares, debe escribir constantemente fragmentos repetidos de código JSX. En la próxima lección, hablaremos sobre cómo automatizar la formación de tales páginas usando herramientas estándar de JavaScript, al mismo tiempo que separamos el marcado y los datos.
Estimados lectores! Si su solución a los problemas de este taller es diferente de la propuesta, cuéntenos al respecto.