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

Введение

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

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

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

Начнем!

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

На этом шаге вы создадите новый дочерний компонент и подготовите его к приему props. Функциональные компоненты в React могут принимать один аргумент, который представляет собой объект, содержащий все переданные ему props. По соглашению, этот объект называется 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!".

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

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

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

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

import Greeting from "./Greeting.jsx";

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

export default App;

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

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

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

Теперь, когда компонент Greeting получает prop 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.

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

Написание props.name, props.age и так далее может стать утомительным, особенно если компонент получает много props. Более чистый и распространенный подход — использовать деструктуризацию 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!"), но наш код теперь более лаконичный и читаемый.

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

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

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

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

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

export default Greeting;

Теперь давайте протестируем это. Откройте src/App.jsx и добавьте еще один компонент <Greeting />, но на этот раз не передавайте ему prop 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!" (от компонента, который получил prop)
"Hello, Guest!" (от компонента, который использовал prop по умолчанию)

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

Резюме

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

В этой лабораторной работе вы практиковались в следующем:

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

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