Читать книгу React и TypeScript: Практическое руководство. Быстрый старт - - Страница 17

Автоматическое создание объектов props – это инструмент, который упрощает передачу данных между компонентами. Давайте рассмотрим, как этот подход может ускорить разработку и сделать ваш код более чистым и читаемым.

8.1 Введение в объект props в React

В React, props (сокращение от «properties» или «свойства») – это специальный объект, который используется для передачи данных и настроек от родительского компонента к дочернему компоненту. Он представляет собой набор свойств, которые доступны дочернему компоненту для использования. Эти свойства передаются в компонент в виде атрибутов JSX при его использовании.

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

}

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

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

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

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

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

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

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

В React компоненты организованы в древовидную структуру, где один компонент может быть родительским по отношению к другому. В React каждый компонент «знает» о своих дочерних компонентах, но дочерние компоненты не «знают» о своих родительских компонентах напрямую. Вместо этого родительские компоненты могут передавать данные и свойства своим дочерним компонентам через props.

Для того, чтобы определить, является ли текущий компонент родительским, можно воспользоваться следующими методами:

– Иерархия компонентов. Родительский компонент – это тот, который находится на более высоком уровне иерархии компонентов, и от которого исходят данные или свойства для одного или нескольких дочерних компонентов. Дочерний компонент, наоборот, находится внутри родительского компонента.

– Анализ кода. Если вы изучаете код приложения, родительский компонент обычно тот, который решает, какие данные передавать дочерним компонентам через props и какие обработчики событий передавать для взаимодействия с дочерними компонентами.

– Свойство children. Родительский компонент может использовать свойство children, чтобы передать дочерним компонентам элементы JSX внутри компонента. Если вы видите, что в родительском компоненте есть использование props.children, это может быть признаком того, что компонент решает, какие компоненты или элементы JSX вставлять внутри себя.

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

8.3 Создание объекта props

React автоматически создает объект props для каждой инстанции компонента на основе атрибутов JSX, которые вы передаете при создании компонента. Объект props представляет собой набор свойств и их значений, которые могут быть использованы внутри компонента. Давайте разберем, как это происходит:

– Создание компонента. При создании компонента в React, например, с использованием функционального компонента, вы определяете его сигнатуру, включая ожидаемые свойства.

Например:

function MyComponent (props) {

//…

}

– Использование компонента в JSX. При использовании компонента в JSX, вы передаете свойства, используя атрибуты компонента. Например:

<MyComponent name=«John» age= {30} />

В этом примере мы передаем два свойства (name и age) в компонент MyComponent.

– Создание объекта props: React автоматически создает объект props, который содержит переданные свойства. В данном случае, объект props будет выглядеть следующим образом:

{

name: «John»,

age: 30

}

Использование свойств внутри компонента: Внутри компонента вы можете обращаться к свойствам через объект props.

Например:

)

}

В этом примере компонент MyComponent использует свойства name и age, которые были переданы через props.

Таким образом, React автоматически создает объект props для каждой инстанции компонента на основе переданных атрибутов JSX, и этот объект становится доступным внутри компонента для доступа к переданным свойствам.

8.4 Доступ к свойствам через объект props

В React, чтобы получить доступ к свойствам из объекта props внутри компонента, вы можете использовать обычную точечную нотацию, так как мы это делали ранее. Однако также существует более удобный способ с использованием деструктуризации22 объекта props.

21

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

22

Деструктуризация – это способ извлечь данные из структуры данных, таких как массивы или объекты, используя более компактный и удобный синтаксис.