React Props: Передача данных в компоненты

Введение

В React props (сокращение от "properties" — свойства) являются фундаментальной концепцией для передачи данных от одного компонента к другому. Они позволяют создавать динамические и переиспользуемые компоненты. Представьте пропсы как аргументы, которые вы передаете в функцию: они позволяют родительскому компоненту настраивать свои дочерние компоненты. Пропсы доступны только для чтения, что означает, что дочерний компонент никогда не должен изменять полученные им пропсы.

В этой лабораторной работе вы научитесь:

Определять и передавать пропсы из родительского компонента в дочерний.
Получать доступ к пропсам и использовать их внутри дочернего компонента.
Использовать деструктуризацию для написания более чистого кода.
Устанавливать значения пропсов по умолчанию.

Давайте начнем!

Определение параметра props в функциональном компоненте

На этом этапе вы создадите новый дочерний компонент и подготовите его к получению пропсов. Функциональные компоненты в React могут принимать один аргумент — объект, содержащий все переданные ему пропсы. По соглашению этот объект называют props.

Сначала перейдем в директорию нашего проекта. Скрипт настройки уже создал проект с именем my-app.

cd ~/project/my-app

Затем установим зависимости проекта.

npm install

Теперь создадим файл нового компонента. В файловом менеджере слева перейдите в папку src. Создайте внутри src новый файл и назовите его Greeting.jsx.

Добавьте следующий код в созданный файл src/Greeting.jsx. Это определение простого функционального компонента, который принимает параметр props.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

Теперь нам нужно импортировать и использовать этот новый компонент в нашем основном компоненте App. Откройте файл src/App.jsx и измените его следующим образом:

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

Теперь запустим сервер разработки, чтобы увидеть наше приложение.

npm run dev -- --host 0.0.0.0 --port 8080

После выполнения команды переключитесь на вкладку Web 8080 в левом верхнем углу интерфейса. Вы должны увидеть работающее приложение с надписями "Welcome to My App" и "Hello, World!".

Передача значения пропса от родителя, например name="John"

На этом этапе вы узнаете, как передавать данные из родительского компонента (App) в дочерний (Greeting). Это делается с помощью синтаксиса, похожего на атрибуты HTML, в JSX.

Мы хотим передать имя человека в наш компонент Greeting, чтобы он мог отобразить персонализированное сообщение.

Откройте файл src/App.jsx. Измените строку <Greeting />, добавив пропс name со значением "John".

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

Здесь name="John" — это пропс. name — это ключ пропса, а "John" — его значение. Вы можете передать любое выражение JavaScript в качестве значения пропса, обернув его в фигурные скобки {}. Для строк достаточно кавычек.

После сохранения файла сервер разработки автоматически перезагрузится. Если вы проверите вкладку Web 8080, вывод еще не изменится. Это потому, что мы передали пропс, но компонент Greeting его еще не использует. Мы исправим это на следующем этапе.

Доступ к пропсу в дочернем компоненте через props.name

Теперь, когда компонент Greeting получает пропс name, давайте его используем. Объект props в дочернем компоненте содержит все свойства, переданные от родителя. Вы можете получить к ним доступ с помощью точечной нотации, например props.propertyName.

Откройте файл src/Greeting.jsx. Мы изменим его, чтобы получить доступ к props.name и отобразить персонализированное приветствие. Используйте фигурные скобки {}, чтобы внедрить выражение JavaScript прямо в JSX.

Обновите src/Greeting.jsx следующим кодом:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Сохраните файл. Теперь переключитесь на вкладку Web 8080. Вы должны увидеть, что сообщение обновилось на "Hello, John!".

Это демонстрирует базовый поток данных в React: от родителя к ребенку через пропсы.

Деструктуризация пропсов в параметрах функции

Постоянное написание props.name, props.age и т.д. может стать утомительным, особенно если компонент получает много пропсов. Более чистый и распространенный подход — использовать деструктуризацию ES6 для извлечения свойств из объекта props прямо в списке параметров функции.

Давайте отрефакторим компонент Greeting с использованием деструктуризации.

Откройте src/Greeting.jsx и измените сигнатуру функции. Вместо принятия props мы деструктурируем его, чтобы получить name напрямую.

Обновите файл следующим образом:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Изменив (props) на ({ name }), мы указываем JavaScript извлечь свойство name из объекта, переданного в функцию. Это делает тело компонента чище, так как теперь мы можем использовать name напрямую вместо props.name.

Сохраните файл и проверьте вкладку Web 8080. Вывод должен остаться прежним ("Hello, John!"), но наш код стал более лаконичным и читаемым.

Установка значений пропсов по умолчанию

Что произойдет, если родительский компонент не передаст обязательный пропс? Значение будет undefined, что может привести к ошибкам или неожиданному поведению интерфейса. Чтобы предотвратить это, можно указать значения по умолчанию для пропсов.

Для функциональных компонентов можно использовать параметры по умолчанию в сигнатуре функции.

Давайте установим имя по умолчанию для нашего компонента Greeting. Откройте src/Greeting.jsx и измените параметр функции, добавив значение по умолчанию. Мы установим имя по умолчанию "Guest".

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Теперь давайте протестируем это. Откройте src/App.jsx и добавьте еще один компонент <Greeting />, но на этот раз не передавайте ему пропс name.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

Сохраните оба файла. Перейдите на вкладку Web 8080. Теперь вы должны увидеть два приветствия:

"Hello, John!" (от компонента, который получил пропс)
"Hello, Guest!" (от компонента, который использовал пропс по умолчанию)

Это надежный способ сделать ваши компоненты более предсказуемыми и избежать ошибок.

Резюме

Поздравляем с завершением лабораторной работы! Вы изучили основы использования пропсов в React для создания переиспользуемых и динамических компонентов.

В этой работе вы попрактиковались в:

Передаче данных от родительского компонента к дочернему с помощью пропсов.
Доступе к пропсам внутри дочернего компонента через объект props.
Использовании деструктуризации для написания более чистого и читаемого кода.
Установке значений по умолчанию для пропсов, чтобы сделать компоненты более надежными.

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