Пропсы: передача данных

Учимся настраивать компоненты снаружи: передаём данные через пропсы, как атрибуты тега.

Props (свойства) — объект с данными, который родительский компонент передаёт дочернему, чтобы настроить его поведение и содержимое.

Зачем нужны пропсы

Компонент Greeting из прошлого урока всегда здоровается одинаково. А хочется передать ему имя — чтобы один компонент приветствовал разных людей. Это и делают пропсы: передаются как атрибуты, читаются как параметр функции.

function Greeting(props) {
  return <h1>Привет, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Аня" />
      <Greeting name="Борис" />
    </div>
  );
}

Каждый <Greeting> получает свой name. React собирает все атрибуты в объект props и передаёт его первым аргументом.

Деструктуризация пропсов

Писать props.name, props.age утомительно. Обычно пропсы сразу деструктурируют прямо в скобках параметра — это самый частый стиль в реальном коде:

function UserCard({ name, age, city }) {
  return (
    <div className="card">
      <h2>{name}, {age}</h2>
      <p>Город: {city}</p>
    </div>
  );
}

<UserCard name="Иван" age={30} city="Москва" />

Строки и выражения

Строковый проп можно передать в кавычках: name="Аня". Любое другое значение — число, булево, объект, переменную — в фигурных скобках:

<Product
  title="Книга"
  price={499}
  inStock={true}
  tags={["новинка", "хит"]}
/>

Пропсы только для чтения

Важнейшее правило: пропсы нельзя менять внутри компонента. Они принадлежат родителю, ребёнок их только читает. Попытка присвоить — ошибка проектирования:

function Greeting({ name }) {
  name = "Другое имя"; // ❌ так делать нельзя
  return <h1>Привет, {name}!</h1>;
}

Данные в React текут «сверху вниз»: от родителя к ребёнку. Если ребёнку нужно что-то изменить, он сообщает об этом родителю через функцию-проп (это разберём в разделе про состояние). Такой поток называют однонаправленным.

Значения по умолчанию

Если проп могут не передать, удобно задать значение по умолчанию прямо в деструктуризации:

function Button({ text = "ОК", type = "button" }) {
  return <button type={type}>{text}</button>;
}

<Button />            // покажет «ОК»
<Button text="Войти" /> // покажет «Войти»

Итог

Пропсы передаются как атрибуты тега, читаются как объект props (обычно деструктурируют).
Строки — в кавычках, остальное — в фигурных скобках.
Пропсы только для чтения; данные текут сверху вниз (однонаправленный поток).