4.1 KiB
4.1 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036170 | Create a Stateful Component | 6 | false | Crear un componente de estado |
Description
state
. El estado consiste en cualquier información que su aplicación necesite conocer, que puede cambiar con el tiempo. Desea que sus aplicaciones respondan a los cambios de estado y presenten una interfaz de usuario actualizada cuando sea necesario. React ofrece una buena solución para la administración estatal de aplicaciones web modernas. Usted crea el estado en un componente React declarando una propiedad de state
en la clase de componente en su constructor
. Esto inicializa el componente con el state
cuando se crea. La propiedad de state
debe establecer en un object
JavaScript. Declarándolo se ve así: this.state = {
// describe tu estado aquí
} Usted tiene acceso al objetostate
largo de la vida de su componente. Puede actualizarlo, representarlo en su interfaz de usuario y pasarlo como accesorios a componentes secundarios. El objeto destate
puede ser tan complejo o tan simple como lo necesite. Tenga en cuenta que debe crear un componente de clase extendiendoReact.Component
para crear unstate
como este.
Instructions
name
desde su state
. Sin embargo, no hay un state
definido. Inicialice el componente con el state
en el constructor
y asigne su nombre a una propiedad de name
. Tests
tests:
- text: <code>StatefulComponent</code> debería existir y renderizarse.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "<code>StatefulComponent</code> should exist and render.");'
- text: <code>StatefulComponent</code> debe representar un elemento <code>div</code> y un elemento <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.");'
- text: El estado de <code>StatefulComponent</code> debe inicializarse con un <code>name</code> propiedad establecido en una cadena.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.");'
- text: El <code>name</code> de la propiedad en el estado de <code>StatefulComponent</code> debe representarse en el elemento <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.");'
Challenge Seed
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required