Toni_Dev 
14.09.2023 
0 
628 В React, компоненты и пропсы играют ключевую роль. Компоненты — это строительные блоки приложения, а пропсы позволяют передавать данные между ними. Давайте погрузимся в эту тему и начнем с основ.
Теория
Что такое компоненты
Компоненты — это ключевой строительный блок React-приложений. Они представляют собой небольшие, независимые части интерфейса, которые можно переиспользовать. В React, компоненты могут быть классами (классовые компоненты) или функциями (функциональные компоненты). Компоненты являются фундаментальными для организации кода и делают код более понятным и поддерживаемым.
Функциональные компоненты
Функциональные компоненты — это функции JavaScript, которые возвращают JSX (расширение JavaScript, позволяющее описывать структуру пользовательского интерфейса). Вот общий вид объявления функционального компонента:
import React from "react";
function MyComponent(props) {
// Логика компонента
return (
// JSX для отображения
);
}
export default MyComponent;Здесь MyComponent — это имя вашего компонента, props — это объект пропсов (рассмотрим далее), который может содержать данные, переданные в компонент извне. Внутри компонента, вы можете выполнять любую логику, необходимую для отображения.
Чтобы использовать функциональный компонент, просто добавьте его в JSX вашего приложения, как обычный HTML-тег:
<MyComponent prop1="Значение 1" prop2="Значение 2" />Внутреннее состояние компонента
В React, внутреннее состояние компонента представляет собой данные, которые компонент может хранить и изменять в процессе выполнения. Для создания и управления внутренним состоянием функциональных компонентов используется хук useState.
Пример Счетчика:
Представьте, что нам нужно создать счетчик, который пользователь может увеличивать. Вот как это можно сделать с использованием внутреннего состояния:
import React, { useState } from "react";
function Counter() {
// Используем useState для создания состояния "count" со значением по умолчанию 0
const [count, setCount] = useState(0);
// Функция для увеличения значения счетчика
const increment = () => {
setCount(count + 1); // Обновляем состояние "count"
};
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={increment}>Увеличить</button>
</div>
);
}
export default Counter;Здесь мы:
- Импортировали хук useState из библиотеки React.
- Использовали useState для создания переменной count и функции setCount. count — это наше внутреннее состояние счетчика, а setCount — функция для его обновления.
- Создали функцию increment, которая увеличивает значение счетчика при каждом нажатии на кнопку «Увеличить», используя setCount.
- Теперь мы имеем компонент Counter, который имеет внутреннее состояние в виде счетчика. При каждом нажатии на кнопку «Увеличить», значение счетчика обновляется и отображается на экране.
Что такое props
Props (сокращение от «properties») — это способ передачи данных от родительских компонентов дочерним. Они представляют собой атрибуты компонентов и могут содержать как данные, так и функции. Props позволяют динамически изменять содержимое компонентов, делая их более гибкими и многоразовыми.
Пример передачи данных через props
Предположим, у нас есть компонент TaskList, который отображает список задач, и компонент Task, который представляет отдельную задачу. Мы можем передать данные о задачах из TaskList в Task с помощью props:
// В компоненте TaskList
<Task title="Купить продукты" />
// В компоненте Task
function Task(props) {
return <div>{props.title}</div>;
}В этом примере title передается из TaskList в Task через пропс, и компонент Task отображает заголовок задачи.
Вложение компонентов с помощью props.children
props.children в React — это специальное свойство, которое позволяет передавать дочерние элементы в компоненты и манипулировать ими. Это делает компоненты более гибкими и позволяет вам вставлять контент между открывающим и закрывающим тегами компонента.
Предположим, у нас есть компонент TodoList, который будет отображать список задач внутри себя. Мы хотим, чтобы мы могли передавать сами задачи внутрь этого компонента. Вот как это можно сделать:
function TodoList(props) {
return (
<div>
<h2>Список задач</h2>
<ul>
{props.children}
</ul>
</div>
);
}
function App() {
return (
<div>
<h1>Приложение Todo</h1>
<TodoList>
<li>Купить молоко</li>
<li>Подготовить презентацию</li>
<li>Позвонить маме</li>
</TodoList>
</div>
);
}В этом примере, мы создаем TodoList, который принимает props.children. Когда мы используем TodoList внутри App и передаем ему список задач в виде дочерних элементов (элементов <li>), они автоматически становятся props.children для компонента TodoList.
Теперь наш TodoList может отображать переданный список задач, делая его более гибким и переиспользуемым. Вы можете легко добавлять и изменять задачи, передавая их как дочерние элементы TodoList.
Практика
В практике мы создадим несколько простых компонентов и передадим данные между ними с использованием props.
Пример создания компонентов:
// Компонент Header
function Header(props) {
return <h1>{props.title}</h1>;
}
// Компонент List
function List(props) {
const items = props.items.map((item, index) => (
return <li key={index}>{item}</li>
));
return <ul>{items}</ul>;
}Здесь мы создали компонент Header, который отображает заголовок, и компонент List, который отображает список элементов.
Пример передачи данных через props:
// В родительском компоненте
const items = ["Пункт 1", "Пункт 2", "Пункт 3"];
function App() {
return (
<div>
<Header title="Список Пунктов" />
<List items={items} />
</div>
);
}Здесь мы передаем заголовок и список элементов из родительского компонента App в дочерние компоненты Header и List с помощью props. Каждый компонент может использовать эти данные для отображения на странице.
