Props в React — передача данных между компонентами

Props — это входные данные компонента. Родитель передаёт props дочернему компоненту, а дочерний использует их для отображения интерфейса.

База компонентов и props

Этот раздел собирает главный фундамент React: компонент как функция, входные данные через props, обработчики событий и children. Если эти темы понятны, дальше проще разбирать state, формы, роутинг и UI-библиотеки.

Не пытайтесь сразу строить сложную архитектуру. Сначала важно увидеть, как один компонент получает данные, как вызывает функцию из props и как children помогает собирать интерфейс из маленьких частей.

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

function UserCard(props) {
  return (
    <article>
      <h2>{props.name}</h2>
      <p>{props.role}</p>
    </article>
  );
}

function App() {
  return <UserCard name="Алиса" role="Frontend developer" />;
}

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

function UserCard({ name, role, isOnline }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>{role}</p>
      <span>{isOnline ? 'Онлайн' : 'Офлайн'}</span>
    </article>
  );
}

Передача функции через props

Дочерний компонент не должен сам менять состояние родителя. Родитель передаёт функцию, дочерний вызывает её по событию.

function TodoItem({ todo, onToggle }) {
  return (
    <label>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      {todo.text}
    </label>
  );
}

children в React

children — специальный prop для вложенного содержимого. Он удобен для кнопок, карточек, модальных окон и layout-компонентов.

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

function App() {
  return (
    <Card title="Профиль">
      <p>Имя: Алиса</p>
      <button>Редактировать</button>
    </Card>
  );
}

Props нельзя менять

Props считаются read-only. Если нужно изменить данные, храните их в state родителя и передавайте вниз новое значение.

// Нельзя
function Counter({ count }) {
  count = count + 1;
}

// Нужно
function Counter({ count, onIncrement }) {
  return <button onClick={onIncrement}>{count}</button>;
}

Паттерн композиции

Композиция — это когда компонент не знает заранее, что будет внутри, а получает содержимое через children. Так строят layout, карточки, панели и модальные окна.

function Page({ title, actions, children }) {
  return (
    <main>
      <header>
        <h1>{title}</h1>
        <div>{actions}</div>
      </header>
      <section>{children}</section>
    </main>
  );
}

function UsersPage() {
  return (
    <Page title="Пользователи" actions={<button>Добавить</button>}>
      <p>Список пользователей будет здесь.</p>
    </Page>
  );
}

Как дробить компоненты

• Если кусок JSX повторяется — вынесите компонент.
• Если компонент стал длиннее 100-150 строк — проверьте, можно ли выделить части.
• Если у блока есть понятный смысл в интерфейсе — это кандидат на компонент.
• Не дробите каждую кнопку без необходимости: слишком мелкая нарезка тоже мешает читать код.

Именование props

Называйте props по смыслу: user, product, isActive, onSave, onClose. Для функций-обработчиков удобно использовать префикс on у props и handle внутри компонента.

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return (
    <div className="modal">
      {children}
      <button onClick={onClose}>Закрыть</button>
    </div>
  );
}

Как понять, что компонент получился удачным

Хороший React-компонент легко прочитать без знания всего проекта. По имени понятно, что он показывает, по props понятно, какие данные ему нужны, а внутри нет лишней логики, которая должна жить выше.

Если компонент трудно назвать или его props превращаются в длинный случайный список, это сигнал пересмотреть границы. Хорошая декомпозиция делает код спокойнее: данные приходят сверху, события уходят наверх, а компонент отвечает за один понятный кусок интерфейса.

Проверка компонента

• название отвечает на вопрос, что это за часть интерфейса;
• props названы по смыслу, а не data1 и value2;
• компонент не меняет props напрямую;
• обработчики приходят сверху как onSave, onClose, onSelect;
• children используется там, где компонент должен быть обёрткой.

Когда дробить компонент

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

Следующее упражнение

Возьмите карточку товара и вынесите из неё ProductImage, ProductPrice и BuyButton. Затем попробуйте вернуть всё назад и сравнить читаемость. Так быстро становится понятно, где граница полезной декомпозиции.