App
который отображает дочерний компонент Welcome
который является функциональным компонентом без состояния. Вы можете пройти Welcome
в user
собственность, написав: <App>Вы используете пользовательские атрибуты HTML, которые React предоставляет поддержку для передачи
<Welcome user = 'Mark' />
</ Приложение>
user
свойства в компонент Welcome
. Поскольку Welcome
является функциональным компонентом без состояния, он имеет доступ к этому значению следующим образом: const Добро пожаловать = (реквизит) => <h1> Здравствуйте, {props.user}! </ h1>Стандартно вызывать это значение
props
и при работе с функциональными компонентами без состояния, вы в основном рассматриваете его как аргумент функции, которая возвращает JSX. Вы можете получить доступ к значению аргумента в теле функции. С компонентами класса вы увидите, что это немного отличается. CurrentDate
компоненты Calendar
и CurrentDate
. При рендеринге CurrentDate
из компонента Calendar
передайте свойство date
назначенное текущей дате из объекта Date
JavaScript. Затем получите доступ к этой prop
в компоненте CurrentDate
, показывая ее значение в тегах p
. Обратите внимание, что для значений prop
которые будут оцениваться как JavaScript, они должны быть заключены в фигурные скобки, например date={Date()}
. Calendar
должен возвращать один элемент div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The Calendar
component should return a single div
element.");'
- text: Второй дочерний компонент компонента Calendar
должен быть компонентом CurrentDate
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the Calendar
component should be the CurrentDate
component.");'
- text: 'Компонент CurrentDate
должен иметь опору, названную date
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The CurrentDate
component should have a prop called date
.");'
- text: CurrentDate
date
CurrentDate
должен содержать строку текста.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The date
prop of the CurrentDate
should contain a string of text.");'
- text: Компонент CurrentDate
должен отображать значение с date
prop в теге p
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The CurrentDate
component should render the value from the date
prop in the p
tag.");'
```
The current date is:
{ /* change code above this line */ }