state
в методе render()
. Вы можете получить доступ к данным с помощью this.state
. Если вы хотите получить доступ к значению состояния в return
метода рендеринга, вы должны заключить его в фигурные скобки. State
- одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторную визуализацию компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве опоры. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его state
. Его state
полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве props
. Это понятие инкапсулированного state
очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода. MyComponent
should have a key name
with value freeCodeCamp
stored in its state.");'
- text: MyComponent
должен отображать заголовок h1
заключенный в один div
.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: 'Представленный h1
заголовок должен содержать текст, отображаемый из состояния компонента.'
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