state
. O estado consiste em todos os dados que seu aplicativo precisa conhecer, que podem mudar com o tempo. Você quer que seus aplicativos respondam a mudanças de estado e apresentem uma interface atualizada quando necessário. O React oferece uma boa solução para o gerenciamento de estado de aplicativos da Web modernos. Você cria o estado em um componente React declarando uma propriedade de state
na classe do componente em seu constructor
. Isso inicializa o componente com o state
quando ele é criado. A propriedade state
deve ser configurada para um object
JavaScript. Declarar isso é assim: this.state = {
// descreva seu estado aqui
} Você tem acesso ao objeto destate
durante a vida útil do seu componente. Você pode atualizá-lo, renderizá-lo em sua interface do usuário e passá-lo como props para componentes filhos. O objeto destate
pode ser tão complexo ou simples quanto você precisar. Observe que você deve criar um componente de classe estendendoReact.Component
para criar umstate
como este.
name
de seu state
. No entanto, não há state
definido. Inicialize o componente com state
no constructor
e atribua seu nome a uma propriedade de name
. StatefulComponent
deve existir e renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "StatefulComponent
should exist and render.");'
- text: StatefulComponent
deve renderizar um div
e um elemento h1
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "StatefulComponent
should render a div
and an h1
element.");'
- text: O estado de StatefulComponent
deve ser inicializado com um name
propriedade definido como uma string.
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 StatefulComponent
should be initialized with a property name
set to a string.");'
- text: O name
propriedade no estado de StatefulComponent
deve ser renderizado no elemento h1
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property name
in the state of StatefulComponent
should render in the h1
element.");'
```