Передача свойств функциональному компоненту
Предыдущие задачи во многом касались создания и компоновки элементов JSX, функциональных и классовых React-компонентов. Пришло время взглянуть на еще одну особенность, часто встречающуюся в React: передачу свойств (props) . В React вы можете передать свойства дочерним компонентам. Скажем, у вас есть компонент App который отображает дочерний компонент Welcome который является функциональным компонентом без состояния. Вы можете передать в компонент Welcome свойство user, написав:
<App>
<Welcome user='Mark' />
</App> user в компонент Welcome . Поскольку Welcome является функциональным компонентом без состояния, он имеет доступ к этому значению следующим образом: const Welcome = (props) => Hello, {props.user}!
Еще раз напомню, что функциональные компоненты - это по сути обычные функции, и в этих функциях мы можем получать доступ к переданным им аргументам. Когда React рендерит свои компоненты с прописанными в них атрибутами, он все эти атрибуты и их значения передает первым аргументом в конечный компонент единым объектом. Принято этот объект называть props, но вы в своих функциях можете и по-другому его называть, суть его от этого не поменяется.
Заметка: С классовыми компонентами чуть иначе дела обстоят. Напомню, что классы в ES6 - это по сути те же самые функции, но у них имеется функция constructor, которая автоматически вызывается при создании конечного инстанса. Подробнее о классах в этом уроке. В случае с реакт-компонентами, когда реакт создает конечный инстанс классового компонента, реакт передает в него объект props, который на уровне конструктора класса React.Component присваивает его внутреннему свойству {this.props}, примерно вот так:
// React.Component
class Component {
constructor(props) {
this.props = props;
}
}В редакторе кода есть компоненты Calendar и CurrentDate . При рендеринге CurrentDate из компонента Calendar передайте свойство date со значением текущей даты из JavaScript-объекта Date. Затем получите доступ к этой дате через переданный в него объект props в компоненте CurrentDate. Полученное значение выведите в тег p . Обратите внимание, что для передачи в реакт-компоненты свойств, значения которых не являются строками (то есть объектами, массивами, числами, вычисляемыми значениями и т.п.), эти свойства должны быть заключены в фигурные скобки, например date={Date()} .