135 lines
4.5 KiB
Markdown
135 lines
4.5 KiB
Markdown
---
|
||
id: 5a24c314108439a4d4036164
|
||
title: Створення компоненту за допомогою композиції
|
||
challengeType: 6
|
||
forumTopicId: 301383
|
||
dashedName: create-a-component-with-composition
|
||
---
|
||
|
||
# --description--
|
||
|
||
Тепер ми поглянемо, як ми можемо скласти декілька React разом. Уявіть, що ви створюєте додаток і вже створили три компоненти: `Navbar`, `Dashboard`, і `Footer`.
|
||
|
||
Щоб скласти їх разом, ви можете створити компонент `App` *parent*, який відображає кожен з цих трьох компонентів як *children*. Щоб відобразити компонент як дочірній у React компоненті, ви включаєте в перелік ім'я компоненту, написане як власний HTML-тег у JSX. Для прикладу, у методі `render` ви можете написати:
|
||
|
||
```jsx
|
||
return (
|
||
<App>
|
||
<Navbar />
|
||
<Dashboard />
|
||
<Footer />
|
||
</App>
|
||
)
|
||
```
|
||
|
||
Коли React стикається із власним HTML-тегом, який посилається на інший компонент (ім'я компоненту взято в дужки у `< />` як в цьому прикладі), він відображає примітку для цього компоненту у місці розташування тегу. Це повинно відображати батьківські/дочірні зв'язки між компонентом `App` і `Navbar`, `Dashboard` та `Footer`.
|
||
|
||
# --instructions--
|
||
|
||
У редакторі коду є простий функціональний компонент, який називається `ChildComponent` і компонент класу, який називається `ParentComponent`. Складіть їх обидвох разом, використовуючи відображення `ChildComponent` всередині `ParentComponent`. Пересвідчіться, що закрили тег `ChildComponent` за допомогою навскісної риски перед ним.
|
||
|
||
**Note:** `ChildComponent` визначається за допомогою функції стрілки ES6, тому що це досить поширена практика під час використання React. Проте, знайте, що це - просто функція. Якщо ви не знайомі з синтаксисом функції зі стрілками, будь ласка, зверніться до розділу JavaScript.
|
||
|
||
# --hints--
|
||
|
||
React компонент повинен повертати одинарний `div` елемент.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
|
||
return shallowRender.type() === 'div';
|
||
})()
|
||
);
|
||
```
|
||
|
||
Компонент повинен повертати два вкладених елементи.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
|
||
return shallowRender.children().length === 2;
|
||
})()
|
||
);
|
||
```
|
||
|
||
Компонент повинен повертати `ChildComponent` в якості другого дочірнього елементу.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
|
||
return (
|
||
mockedComponent.find('ParentComponent').find('ChildComponent').length ===
|
||
1
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --after-user-code--
|
||
|
||
```jsx
|
||
ReactDOM.render(<ParentComponent />, document.getElementById('root'))
|
||
```
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
const ChildComponent = () => {
|
||
return (
|
||
<div>
|
||
<p>I am the child</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
class ParentComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h1>I am the parent</h1>
|
||
{ /* Change code below this line */ }
|
||
|
||
|
||
{ /* Change code above this line */ }
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
const ChildComponent = () => {
|
||
return (
|
||
<div>
|
||
<p>I am the child</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
class ParentComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h1>I am the parent</h1>
|
||
{ /* Change code below this line */ }
|
||
<ChildComponent />
|
||
{ /* Change code above this line */ }
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|