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

Знайомі пропси

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

Пропси, які ви можете передати до тегу <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: 'Лін Ланьїн (Lin Lanying)', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Тепер ви можете читати ці пропси всередині компонента Avatar.

Крок 2: Читайте пропси всередині дочірнього компонента

Ви можете прочитати ці пропси, перераховуючи їх назви person, size, розділені комами всередині ({ та }) безпосередньо після function Avatar. Це дозволяє використовувати їх всередині коду Avatar як змінні.

function Avatar({ person, size }) {
  // person та size доступні тут
}

Додайте трохи логіки до Avatar, яка використовує пропси person та size для рендеру, і готово.

Тепер ви можете налаштувати Avatar для рендеру багатьма різними способами з різними пропсами. Спробуйте змінити значення!

Пропси дозволяють вам думати про батьківські та дочірні компоненти незалежно. Наприклад, ви можете змінити проп person або size всередині Profile, не думаючи про те, як Avatar використовує їх. Аналогічно, ви можете змінити спосіб використання Avatar цих пропсів, не звертаючи уваги на Profile.

Уявіть пропси як «ручки регулювання», які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій — насправді, пропси є єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент — об’єкт props:

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

Зазвичай вам не потрібен весь об’єкт props сам по собі, тому ви розкладаєте його на окремі пропси.

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

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

Вказання значення за замовчуванням для пропа

Якщо ви хочете задати пропу значення за замовчуванням, на яке він посилатиметься, якщо не вказано іншого, ви можете зробити це з деструктуризацією, поставивши = та значення за замовчуванням відразу після параметра:

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

Тепер, якщо <Avatar person={...} /> рендериться без пропу size, size буде встановлено на 100.

Значення за замовчуванням використовується тільки у випадку, якщо проп size відсутній або якщо ви передаєте size={undefined}. Але якщо ви передаєте size={null} або size={0}, значення за замовчуванням не буде використовуватись.

Передача пропсів за допомогою spread синтаксису 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 без перерахування кожної назви окремо.

Використовуйте синтаксис spread з обережністю. Якщо ви використовуєте його в кожному наступному компоненті, то щось пішло не так. Часто це свідчить про те, що вам слід розбити ваші компоненти та передати дочірні елементи як JSX. Детальніше про це далі!

Передача JSX як children

Вкладення вбудованих тегів браузера є звичайною справою:

<div>
  <img />
</div>

Іноді ви захочете вкладати свої власні компоненти так само:

<Card>
  <Avatar />
</Card>

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

Спробуйте замінити <Avatar> всередині <Card> на деякий текст, щоб побачити, як компонент Card може обгорнути будь-який вкладений вміст. Він не потребує “знати”, що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон у багатьох місцях.

Ви можете уявляти компонент з пропом children як компонент з “отвіром”, який може бути “заповнений” батьківськими компонентами з довільним JSX. Ви часто будете використовувати проп children для візуальних обгорток: панелей, сіток і т.д.

Як пропси змінюються з часом

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

Спробуйте змінити колір у випадаючому списку нижче:

Цей приклад показує, що компонент може отримувати різні пропси з часом. Пропси не завжди є статичними! Тут проп time змінюється кожну секунду, а проп color змінюється, коли ви вибираєте інший колір. Пропси відображають дані компонента в будь-який момент часу, а не лише на початку.

Однак, пропси є незмінними (immutable). Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен «попросити» свій батьківський компонент передати йому інші пропси — новий об’єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам’ять, яку вони займали.

Не намагайтеся «змінювати пропси». Щоб реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися у розділі Стан: Пам’ять компонента.