Update access-props-using-this.props.spanish.md (#18577)

This commit is contained in:
Dulce Hernández
2018-10-17 06:54:17 -05:00
committed by Kristofer Koishigawa
parent 2d1e125087
commit e8da1be92e

View File

@ -4,14 +4,14 @@ title: Access Props Using this.props
challengeType: 6 challengeType: 6
isRequired: false isRequired: false
videoUrl: '' videoUrl: ''
localeTitle: Acceder a los apoyos usando this.props localeTitle: Acceder a los props usando this.props
--- ---
## Description ## Description
<section id="description"> Los últimos varios desafíos cubrieron las formas básicas de pasar accesorios a los componentes secundarios. Pero, ¿qué sucede si el componente secundario al que le está pasando una propuesta es un componente de clase ES6, en lugar de un componente funcional sin estado? El componente de clase ES6 utiliza una convención ligeramente diferente para acceder a accesorios. Cada vez que refiera a un componente de clase dentro de sí mismo, use <code>this</code> palabra clave. Para acceder a los apoyos dentro de un componente de clase, que Prefacio el código que se utiliza para acceder a ella con <code>this</code> . Por ejemplo, si un componente de clase ES6 tiene una propiedad llamada <code>data</code> , escribe <code>{this.props.data}</code> en JSX. </section> <section id="description"> Los últimos desafíos cubrieron las formas básicas de pasar propiedades (<code>props</code>) a los componentes hijo. Pero, ¿qué sucede si el componente hijo al que se le está pasando una propiedad es un <em>class component</em>, en lugar de un componente funcional sin estado? El <em>class component</em> utiliza una convención ligeramente diferente para acceder a <code>props</code>. Cada vez que refiera a un <em>class component</em> dentro de sí mismo, use la palabra clave <code>this</code>. Para acceder a <code>props</code> dentro de un class component, se precede el código que se utiliza para acceder a ella con <code>this</code> . Por ejemplo, si un <em>class component</em> tiene una propiedad llamada <code>data</code> , escribir <code>{this.props.data}</code> en JSX. </section>
## Instructions ## Instructions
<section id="instructions"> Renderice una instancia del componente <code>ReturnTempPassword</code> en el componente principal <code>ResetPassword</code> . Aquí, <code>ReturnTempPassword</code> a <code>ReturnTempPassword</code> un prop de <code>tempPassword</code> y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del hijo, <code>ReturnTempPassword</code> , acceda a la propiedad <code>tempPassword</code> dentro de las etiquetas <code>strong</code> para asegurarse de que el usuario vea la contraseña temporal. </section> <section id="instructions"> Renderice una instancia del componente <code>ReturnTempPassword</code> en el componente padre <code>ResetPassword</code> . Aquí, mandar a <code>ReturnTempPassword</code> un prop de <code>tempPassword</code> y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del hijo, <code>ReturnTempPassword</code> , acceda a la propiedad <code>tempPassword</code> dentro de las etiquetas <code>strong</code> para asegurarse de que el usuario vea la contraseña temporal. </section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
@ -47,9 +47,9 @@ class ReturnTempPassword extends React.Component {
render() { render() {
return ( return (
<div> <div>
{ /* change code below this line */ } { /* cambia el código debajo de esta línea */ }
<p>Your temporary password is: <strong></strong></p> <p>Tu contraseña temporal es: <strong></strong></p>
{ /* change code above this line */ } { /* cambia el código arriba de esta línea */ }
</div> </div>
); );
} }
@ -63,12 +63,12 @@ class ResetPassword extends React.Component {
render() { render() {
return ( return (
<div> <div>
<h2>Reset Password</h2> <h2>Cambiar Contraseña</h2>
<h3>We've generated a new temporary password for you.</h3> <h3>Te hemos generado una contraseña temporal.</h3>
<h3>Please reset this password from your account settings ASAP.</h3> <h3>Por favor cambia pronto está contraseña desde las opciones de tu cuenta .</h3>
{ /* change code below this line */ } { /* cambia el código debajo de esta línea */ }
{ /* change code above this line */ } { /* cambia el código arriba de esta línea */ }
</div> </div>
); );
} }
@ -83,7 +83,7 @@ class ResetPassword extends React.Component {
<div id='jsx-teardown'> <div id='jsx-teardown'>
```js ```js
console.info('after the test'); console.info('después de la prueba');
``` ```
</div> </div>
@ -94,6 +94,6 @@ console.info('after the test');
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solución requerida
``` ```
</section> </section>