5.8 KiB
5.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036167 | Render a Class Component to the DOM | 6 | false | Отобразить компонент класса в DOM |
Description
ReactDOM.render(componentToRender, targetNode)
. Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render()
несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode)
. Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов. Instructions
Fruits
и Vegetables
определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood
компонента TypesOfFood
, а затем визуализируйте TypesOfFood
в DOM. Для вас доступен div
с id='challenge-node'
. Tests
tests:
- text: Компонент <code>TypesOfFood</code> должен возвращать один элемент <code>div</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The <code>TypesOfFood</code> component should return a single <code>div</code> element.");'
- text: Компонент <code>TypesOfFood</code> должен отображать компонент <code>Fruits</code> после элемента <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.");'
- text: Компонент <code>TypesOfFood</code> должен отображать компонент « <code>Vegetables</code> после <code>Fruits</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.");'
- text: Компонент <code>TypesOfFood</code> должен отображать DOM внутри <code>div</code> с идентификационным <code>challenge-node</code> id.
testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>"); })(), "The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.");'
Challenge Seed
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{/* change code below this line */}
{/* change code above this line */}
</div>
);
}
};
// change code below this line
Before Test
const Fruits = () => {
return (
<div>
<h2>Fruits:</h2>
<h4>Non-Citrus:</h4>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Strawberries</li>
<li>Bananas</li>
</ul>
<h4>Citrus:</h4>
<ul>
<li>Lemon</li>
<li>Lime</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
</div>
);
};
const Vegetables = () => {
return (
<div>
<h2>Vegetables:</h2>
<ul>
<li>Brussel Sprouts</li>
<li>Broccoli</li>
<li>Squash</li>
</ul>
</div>
);
};
Solution
// solution required