React и TypeScript: Практическое руководство. Быстрый старт

Эти свойства передаются в компонент в виде атрибутов JSX при его использовании.

Рассмотрим простой пример. У нас есть родительский компонент ParentComponent и дочерний компонент ChildComponent. Мы хотим передать строковое свойство message из родительского компонента в дочерний компонент для отображения:

// Родительский компонент

function ParentComponent () {

return

}

// Дочерний компонент

function ChildComponent (props) {

return

}

В приведенном примере, свойство message передается из родительского компонента ParentComponent в дочерний компонент ChildComponent следующим образом:

– В родительском компоненте, при использовании компонента ChildComponent, мы добавляем атрибут message и устанавливаем его значение в «Привет, мир!».

– Внутри дочернего компонента ChildComponent, это свойство становится доступным через объект props. мы можем получить доступ к нему, обратившись к props.message и использовать его для отображения внутри компонента.

Таким образом, через объект props в React можно сделать доступным любое свойство, которое вы определите и передадите из родительского компонента в дочерний компонент. Объект props предоставляет интерфейс для передачи данных между компонентами и позволяет динамически настраивать компоненты.

Через props вы можете передавать не только данные (такие как строки, числа, объекты), но и функции, обработчики событий и другие настройки компонента.

Что касается области видимости, то React обеспечивает уровень доступа к свойствам компонента через объект props, который может быть рассмотрен как «публичный интерфейс» компонента. Дочерний компонент не имеет доступа к свойствам родительского компонента напрямую, за исключением тех свойств, которые были явно переданы через props. Это обеспечивает инкапсуляцию[21 - Инкапсуляция – это упаковка данных и методов, работающих с этими данными, в единый объект (класс или модуль), и скрытие деталей реализации от внешнего мира.

Это позволяет ограничить доступ к данным и методам объекта, предоставив только определенный интерфейс (публичные методы и свойства) для взаимодействия с ним.] и изоляцию компонентов и упрощает их переиспользование.

8.2 Роль объекта props в компонентах

В React компоненты организованы в древовидную структуру, где один компонент может быть родительским по отношению к другому.