4.4 KiB
4.4 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036171 | Render State in the User Interface | 6 | false | Estado de render en la interfaz de usuario |
Description
state
en su método render()
. Puede acceder a los datos con this.state
. Si desea acceder a un valor de estado dentro del return
del método de procesamiento, debe incluir el valor entre llaves. State
es una de las características más poderosas de los componentes en React. Le permite hacer un seguimiento de los datos importantes en su aplicación y generar una IU en respuesta a los cambios en estos datos. Si sus datos cambian, su interfaz de usuario cambiará. React utiliza lo que se llama un DOM virtual, para realizar un seguimiento de los cambios detrás de la escena. Cuando se actualizan los datos del estado, se activa una nueva representación de los componentes que utilizan esos datos, incluidos los componentes secundarios que recibieron los datos como prop. Reacciona actualiza el DOM real, pero solo cuando es necesario. Esto significa que no tiene que preocuparse por cambiar el DOM. Simplemente declara cómo debería ser la interfaz de usuario. Tenga en cuenta que si hace que un componente tenga estado, ningún otro componente es consciente de su state
. Su state
es completamente encapsulado, o local a ese componente, a menos que pase datos de estado a un componente secundario como props
. Esta noción de state
encapsulado es muy importante porque le permite escribir cierta lógica, y luego tener esa lógica contenida y aislada en un lugar en su código. Instructions
MyComponent
ya tiene estado. Defina una etiqueta h1
en el método de procesamiento del componente que representa el valor de name
del estado del componente. Nota: el h1
solo debe representar el valor del state
y nada más. En JSX, cualquier código que escriba con llaves { }
será tratado como JavaScript. Entonces, para acceder al valor desde el state
simplemente incluya la referencia entre llaves. Tests
tests:
- text: <code>MyComponent</code> debe tener un <code>name</code> clave con el valor <code>freeCodeCamp</code> almacenado en su estado.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.");'
- text: <code>MyComponent</code> debe representar un encabezado <code>h1</code> incluido en un solo <code>div</code> .
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.");'
- text: El encabezado <code>h1</code> representado debe contener texto representado desde el estado del componente.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "<div><h1>TestName</h1></div>", "The rendered <code>h1</code> header should contain text rendered from the component's state.");};'
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
return (
<div>
{ /* change code below this line */ }
{ /* change code above this line */ }
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required