Как передать пропсы React компоненту

Содержание туториала по React Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.

Известные пропсы

Пропсы — это информация, которую вы передаете тегу JSX. Например, className, src, alt, width и height — вот некоторые пропсы, которые вы можете передать <img>:

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://example.com/userpic.jpg"
      alt="Userpic"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return <Avatar />;
}

Пропсы, которые вы можете передать тегу <img>, предопределены (ReactDOM соответствует стандартам HTML). Но вы можете передать любые пропсы своим собственным компонентам, таким как <Avatar>, чтобы настроить их.

Передача пропсов в компонент

В этом коде компонент Profile не передает никаких пропсов своему дочернему компоненту Avatar:

export default function Profile() {
  return <Avatar />;
}

Вы можете передать в Avatar некоторые пропсы в два этапа.

Шаг 1: Передайте пропсы дочернему компоненту

Во-первых, передайте некоторые пропсы в Avatar. Например, давайте передадим два пропса: person (объект) и size (число):

export default function Profile() {
  return (
    <Avatar person={{ name: 'User Name 1', imageId: '12345' }} size={100} />
  );
}

Если двойные фигурные скобки после person= вас смущают, помните, что они являются просто объектом внутри фигурных скобок JSX. Теперь вы можете прочитать эти пропсы внутри компонента Avatar.

Шаг 2: Прочтите пропсы внутри дочернего компонента

Вы можете прочитать эти пропсы, указав их имена - person, size - разделенные запятыми внутри ({ и }) непосредственно после function Avatar. Это позволяет использовать их внутри кода Avatar, как если бы вы использовали переменную.

function Avatar({ person, size }) {
  // person и size можно здесь использовть
}

Добавьте немного логики в Avatar, которая использует пропсы person, size в отображении, и все готово. Теперь вы можете настроить Avatar для отображения разными способами с разными пропсы.

// utils.js

export function getImageUrl(person, size = 's') {
  return 'https://example.com/' + person.imageId + size + '.jpg';
}

// App.js

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{
          name: 'User Name 1',
          imageId: '12345',
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'User Name 2',
          imageId: '12346',
        }}
      />
      <Avatar
        size={50}
        person={{
          name: 'User Name 3',
          imageId: '12347',
        }}
      />
    </div>
  );
}

Пропсы позволяют вам думать о родительских и дочерних компонентах независимо друг от друга. Например, вы можете изменить пропсы person или size внутри Profile, не задумываясь о том, как Avatar их использует. Точно так же вы можете изменить то, как Avatar использует эти пропсы, не заглядывая в Profile. Вы можете думать о пропсах как о «ручках», которые вы можете регулировать. Они выполняют ту же роль, что и аргументы для функций — на самом деле пропсы являются единственным аргументом для вашего компонента. Функции компонента React принимают один аргумент, объект props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Обычно вам не нужен весь объект пропса, поэтому можно разбить его на отдельные пропсы. Не пропустите пару фигурных скобок { и } внутри ( и ) при объявлении пропсов:

function Avatar({ person, size }) {
  // ...
}

Этот синтаксис называется «деструктурированием» и эквивалентен чтению свойств из параметра функции:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Как указать значения по умолчанию для пропса

Если вы хотите присвоить пропсу значение по умолчанию, чтобы использовать его, когда значение не указано, вы можете сделать это с помощью деструктуризации, поставив = и значение по умолчанию сразу после параметра:

function Avatar({ person, size = 100 }) {
  // ...
}

Теперь, если в <Avatar person={...} /> передан пропс size, размер будет установлен на 100. Значение по умолчанию используется только в том случае, если параметр size отсутствует или если вы передаете size={undefined}. Но если вы передадите size={null} или size={0}, значение по умолчанию не будет использоваться.

Перенаправление пропсов с синтаксисом распыления JSX

Иногда отправка пропсов повторяется:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

В повторяющемся коде нет ничего плохого. Но иногда хочется сделать код короче. Некоторые компоненты передают все свои пропсы своим дочерним компонентам, например, как Profile делает с Avatar. Поскольку они не используют никакие свои пропсы напрямую, может иметь смысл использовать более краткий синтаксис распыления (spread):

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Это пример перенаправления всех пропсов Profile в Avatar без перечисления каждого из их имен. Используйте расширенный синтаксис с ограничениями. Если вы используете его в каждом компоненте - значит что-то не так. Часто это указывает на то, что следует разделить компоненты и передать дочерние компоненты как JSX. Подробнее об этом далее.

Передача JSX в качестве дочернего компонента

Обычно встроенные теги браузера вкладывают друг в друга:

<div>
  <img />
</div>

Иногда вы захотите вложить свои собственные компоненты таким же образом:

<Card>
  <Avatar />
</Card>

Когда вы вкладываете контент в тег JSX, родительский компонент получит этот контент в просе, называемом children. Например, компонент Card ниже получит проп children, который является <Avatar />, и отобразит его в обертке div:

// App.js

import Avatar from './Avatar.js';

function Card({ children }) {
  return <div className="card">{children}</div>;
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'User Name',
          imageId: '12345',
        }}
      />
    </Card>
  );
}

// Avatar.jsx

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

// utils.js

export function getImageUrl(person, size = 's') {
  return 'https://example.com/' + person.imageId + size + '.jpg';
}

Вы можете думать о компоненте с пропсом children как о специальной лозейке, которую можно «заполнить» родительскими компонентами с произвольным JSX. Вы часто будете использовать проп children для визуальных оболочек: панелей, сеток и т.д.

Как пропсы меняются со временем

Компонент Clock ниже получает два пропса от своего родительского компонента: color и time. (Код родительского компонента опущен, поскольку он использует состояние, в которое мы пока не будем углубляться.)

export default function Clock({ color, time }) {
  return <h1 style={{ color: color }}>{time}</h1>;
}

Этот пример иллюстрирует, что компонент может получать пропсы с течением времени. Проп не всегда статичен. Здесь проп time меняется каждую секунду, а проп color меняется, когда вы выбираете другой цвет. Пропсы отражают данные компонента в любой момент времени, а не только в начале. Пропсы иммутабельны — термин из информатики, означающий «неизменяемый». Когда компоненту необходимо изменить свои пропсы (например, в ответ на взаимодействие с пользователем или новые данные), ему придется «попросить» родительский компонент передать ему другие пропсы — новый объект. Затем его старые пропсы будут отброшены, и в конечном итоге движок JavaScript очистит занятую ими память. Не пытайтесь "изменить пропсы" напрямую. Когда вам нужно отреагировать на пользовательский ввод (например, изменить выбранный цвет), вам нужно будет "установить состояние", о котором вы можете узнать в разделе "Состояние - память компонента".

Резюме

• Чтобы передать пропсы, добавьте их в JSX, как и в случае с атрибутами HTML.
• Чтобы прочитать пропсы, используйте синтаксис деструктурирования function Avatar({ person, size }).
• Вы можете указать значение по умолчанию, например size = 100, которое используется для отсутствующих и неопределенных пропсов.
• Вы можете перенаправить все пропсы с помощью синтаксиса распыления JSX <Avatar {...props} />, но не злоупотребляйте им.
• Вложенный JSX, такой как <Card><Avatar /></Card>, будет отображаться как проп children компонента Card.
• Пропсы - доступны только для чтения. Это такой снимок компонента во времени: каждый рендер получает новую версию пропса.
• Нельзя менять пропсы внутри компонента. Когда вам нужна интерактивность, вам нужно установить состояние.

Содержание туториала по React React с самого начала был разработан для постепенного внедрения. Вы можете использовать React именно в том объеме, в каком вам нужно. Если вы хотите попробовать React, добавить интерактивности на HTML-страницу или запустить сложное приложение на основе React, этот раздел поможет вам начать работу.

Попробовать React

Есть множество онлайн-песочниц, поддерживающих React: например, CodeSandbox, StackBlitz или CodePen.

Попробовать React локально

Чтобы попробовать React локально на своем компьютере, загрузите эту HTML-страницу. Откройте его в редакторе и в браузере.

Установка React и создание проекта

Если вы начинаете новый проект, рекомендуется использовать набор инструментов или фреймворк. Эти инструменты обеспечивают удобную среду разработки, но требуют локальной установки Node.js.

Создание проекта с create-react-app (CRA)

Если вы изучаете React, рекомендуется воспользоваться Create React App. Это самый популярный способ попробовать React и создать новое одностраничное клиентское приложение (SPA). Он создан для React, но не включает встроенных инструментов для маршрутизации или выборки данных. Сначала установите Node.js. Затем откройте терминал и запустите эту строку, чтобы создать проект:

npx create-react-app my-app

Теперь вы можете запустить свое приложение с помощью:

cd my-app
npm start

Create React App не обрабатывает внутреннюю логику или базы данных. Вы можете использовать его с любым бэкендом. Когда вы создадите проект, вы получите папку со статическим HTML, CSS и JS. Поскольку Create React App не может использовать преимущества серверного рендеринга, оно не обеспечивает наилучшей производительности. Если вам нужно более быстрое время загрузки и встроенные функции, такие как маршрутизация и серверная логика, рекомендуется вместо этого использовать фреймворк.

Популярные альтернативы

• Vite
• Parcel

Разработка с полнофункциональным фреймворком

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

Популярные альтернативы

• Gatsby
• Remix
• Razzle

Кастомные инстурменты

Вы можете предпочесть создать и настроить свой собственный инструментарий. Такой Инструментарий обычно состоит из:

• Менеджер пакетов позволяет устанавливать, обновлять и управлять сторонними пакетами. Популярные менеджеры пакетов: npm (встроен в Node.js), Yarn, pnpm.
• Компилятор позволяет компилировать функции современного языка и дополнительный синтаксис, такой как JSX, или аннотации типов для браузеров. Популярные компиляторы: Babel, TypeScript, swc.
• Сборщик позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки. Популярные сборщики: webpack, Parcel, esbuild, swc.
• Минификатор делает ваш код более компактным, чтобы он загружался быстрее. Популярные минификаторы: Terser, swc.
• Сервер обрабатывает запросы c клиентского приложения, чтобы вы могли отображать компоненты в HTML. Популярные серверы: Express.
• Линтер проверяет ваш код на распространенные ошибки. Популярные линтеры: ESLint.
• Средство запуска тестов позволяет запускать тесты для вашего кода. Популярные инструменты для тестирования: Jest.