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. 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. MyComponent
debe tener un name
clave con el valor freeCodeCamp
almacenado en su estado.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent
should have a key name
with value freeCodeCamp
stored in its state.");'
- text: MyComponent
debe representar un encabezado h1
incluido en un solo div
.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: El encabezado h1
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 === "h1
header should contain text rendered from the component's state.");};'
```
## Challenge Seed