Назария

Props и списки

Компонент как функция с параметрами

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

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

<Greeting name="Аня" />        // props = { name: "Аня" }
<Greeting name="Тимур" />      // props = { name: "Тимур" }

Props записываются как атрибуты. Строки — в кавычках, всё остальное — в фигурных скобках:

<Product title="Наушники" price={1990} inStock={true} tags={["audio", "new"]} onBuy={handleBuy} />

Можно передать что угодно: числа, массивы, объекты и даже функции.

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

Писать props. перед каждым свойством утомительно, поэтому props почти всегда сразу раскладывают в параметрах (это деструктуризация из курса JavaScript):

function Product({ title, price, inStock = true }) {
  return (
    <div className="product">
      <h3>{title}</h3>
      <p>{price} ₽</p>
      {!inStock && <p className="out">Нет в наличии</p>}
    </div>
  );
}

inStock = true — значение по умолчанию, если prop не передали.

Props только для чтения

Компонент не меняет свои props. Они принадлежат родителю: если нужно что-то поменять, родитель передаст новые значения, и React перерисует компонент. Менять можно только своё состояние — о нём в следующей теме.

children

Всё, что написано между открывающим и закрывающим тегом компонента, приходит в prop children. Так делают обёртки — карточки, модальные окна, разметку страницы:

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Card title="О нас">
  <p>Мы делаем лучшие курсы.</p>
  <button>Подробнее</button>
</Card>

Списки: map

Чтобы показать массив, его превращают в массив JSX-элементов методом map — React умеет рисовать массивы элементов:

const fruits = ["яблоко", "банан", "вишня"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Зачем нужен key

Каждый элемент списка получает key — уникальный и постоянный идентификатор среди соседей. По нему React понимает, какой элемент какому соответствует между перерисовками: что добавилось, что удалилось, что переехало. Без key React выдаёт предупреждение в консоль и может перепутать состояние элементов (например, введённый текст «прыгнет» в соседнюю строку).

{users.map((user) => <UserRow key={user.id} user={user} />)}

Лучший key — id из данных. Индекс массива (key={index}) — плохой вариант, если элементы можно удалять или переставлять: индексы сдвигаются, и смысл ключа теряется.

Фильтрация и сортировка перед map

Данные готовят обычным JavaScript до return, а в JSX только выводят результат:

function Leaders({ players }) {
  const top = [...players]
    .filter((p) => p.score > 0)
    .sort((a, b) => b.score - a.score)
    .slice(0, 3);

  if (top.length === 0) return <p>Пока никого</p>;

  return (
    <ol>
      {top.map((p) => (
        <li key={p.id}>{p.name} — {p.score}</li>
      ))}
    </ol>
  );
}

[...players] — копия: sort меняет массив на месте, а props трогать нельзя.

Итог

Props — данные от родителя: <Comp name="Аня" age={20} /> → function Comp({ name, age }).
Props только читаем; значения по умолчанию — в деструктуризации.
children — содержимое между тегами компонента.
Списки — array.map(... => <li key={id}>...</li>), key уникален и постоянен; данные готовим до return.