ReactDOM.render(componentToRender, targetNode)
. Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render()
несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode)
. Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов. Fruits
и Vegetables
определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood
компонента TypesOfFood
, а затем визуализируйте TypesOfFood
в DOM. Для вас доступен div
с id='challenge-node'
. TypesOfFood
должен возвращать один элемент div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The TypesOfFood
component should return a single div
element.");'
- text: Компонент TypesOfFood
должен отображать компонент Fruits
после элемента h1
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The TypesOfFood
component should render the Fruits
component after the h1
element.");'
- text: Компонент TypesOfFood
должен отображать компонент « Vegetables
после Fruits
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The TypesOfFood
component should render the Vegetables
component after Fruits
.");'
- text: Компонент TypesOfFood
должен отображать DOM внутри div
с идентификационным challenge-node
id.
testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "TypesOfFood
component should render to the DOM within the div
with the id challenge-node
.");'
```