Композиция: children и разбиение на компоненты

Создавай переиспользуемые компоненты-контейнеры через проп children и разбивай свои экраны на понятные зоны ответственности.

6 мин · 3 вопросов

Некоторые компоненты не знают своего содержимого заранее: карточка, модальное окно, макет страницы. React решает это специальным пропом children: всё, что ты помещаешь между открывающим и закрывающим тегами компонента, передаётся ему и готово к вставке туда, куда он захочет. Контейнер отвечает за рамку, вызывающий код - за содержимое.

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

function App() {
  return (
    <Card>
      <h2>Invoice #1024</h2>
      <p>Amount: €49.90</p>
    </Card>
  );
}

Когда одного слота мало, передавай JSX через именованные пропсы: заголовок, подвал, панель действий. Проп может принять React-элемент так же, как любое другое значение. Ты получаешь несколько «слотов», каждый с понятным именем.

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

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

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что получает проп children компонента?
   • Список его дочерних компонентов, объявленных в том же файле
   • Всё, что помещено между его открывающим и закрывающим тегами
   • Пропсы, переданные родительским компонентом
2. Можно ли передать JSX в пропе, отличном от children?
   • Да, React-элемент - это такое же значение, как любое другое
   • Нет, только проп children принимает JSX
   • Да, но только строкой, содержащей HTML
3. Какой сигнал надёжнее всего говорит о том, что компонент пора разбить?
   • Он превышает двадцать строк кода
   • Он использует больше одного useState
   • Он совмещает в своём рендере несколько разных зон ответственности