4.2 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d403616e | Доступ до пропсів за допомогою this.props | 6 | 301375 | access-props-using-this-props |
--description--
Останні декілька завдань охоплюють основні способи передачі пропсів до дочірніх компонентів. Проте, що, коли дочірній компонент, до якого здійснюється передача пропсу, це компонент класу ES6, а не функціональний компонент? Компонент класу ES6 використовує дещо інший метод доступу до пропсів.
Щоразу посилаючись на компонент класу в його межах, використовуйте ключове слово this
. Щоб отримати доступ до пропсів в межах компоненту класу, ви спочатку надаєте код, який використовуєте, для доступу до нього за допомогою this
. Наприклад, якщо компонент класу ES6 має пропс з назвою data
, ви пишете {this.props.data}
у JSX.
--instructions--
Візуалізуйте екземпляр компоненту Welcome
у батьківському компоненті App
. Надайте Welcome
проп name
та призначте його значенням рядка. Отримайте доступ до name
пропу в strong
тегах у дочірньому компоненті Welcome
.
--hints--
Компонент App
повинен відображати один елемент div
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.children().type() === 'div';
})()
);
Дочірній елемент App
має бути компонентом Welcome
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.children().childAt(0).name() === 'Welcome'
);
})()
);
Компонент Welcome
повинен мати проп з назвою name
.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
})()
);
Компонент Welcome
повинен відображати рядок, який ви передаєте як name
проп у strong
тегах.
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.find('strong').text() ===
mockedComponent.find('Welcome').props().name
);
})()
);
--seed--
--after-user-code--
ReactDOM.render(<App />, document.getElementById('root'))
--seed-contents--
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome />
{ /* Change code above this line */ }
</div>
);
}
};
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong></strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
--solutions--
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong>{this.props.name}</strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome name="Quincy"/>
{ /* Change code above this line */ }
</div>
);
}
};