state
в компоненте. В методе render()
перед оператором return
вы можете напрямую писать JavaScript. Например, вы можете объявлять функции, получать доступ к данным из state
или props
, выполнять вычисления по этим данным и т. Д. Затем вы можете назначить любые данные переменным, к которым у вас есть доступ в операторе return
. MyComponent
метода отрисовки, определит const
называется name
и установите его равным значению имени в компоненте state
. Поскольку вы можете писать JavaScript непосредственно в этой части кода, вам не нужно вставлять эту ссылку в фигурные скобки. Затем в возвращаемом выражении выведите это значение в тег h1
используя name
переменной. Помните, что в операторе return вам нужно использовать синтаксис JSX (фигурные скобки для JavaScript). MyComponent
должен иметь ключевое name
со значением freeCodeCamp
сохраненным в его состоянии.
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
должен отображать заголовок h1
заключенный в один div
.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: 'Представленный тег h1
должен содержать ссылку на {name}
.'
testString: 'getUserInput => assert(/h1
tag should include a reference to {name}
.");'
- 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