Объясни паттерн Compound Components в React. Как его можно реализовать с использованием Context и cloneElement, и на что стоит обратить внимание при передаче пропсов между компонентами?

Что такое Compound Components?

Compound Components — это паттерн в React, при котором несколько компонентов объединяются в единый API, работая вместе и разделяя внутреннее состояние. Классический пример — <Select> и <Select.Option>, где родитель управляет выбором, а дочерние элементы отображают варианты. Этот подход улучшает читаемость и переиспользуемость кода, позволяя разработчикам комбинировать компоненты без явной передачи пропсов на каждом уровне.

Реализация через Context

Самый надёжный способ — использовать React Context. Родительский компонент создаёт контекст и передаёт через него состояние и функции. Дочерние компоненты получают доступ к контексту через хук useContext. Это избавляет от проблем с вложенностью и позволяет легко расширять API.

const SelectContext = React.createContext();

function Select({ children }) {
  const [value, setValue] = React.useState('');
  return (
    <SelectContext.Provider value={{ value, setValue }}>
      {children}
    </SelectContext.Provider>
  );
}

function Option({ value, children }) {
  const { value: selected, setValue } = React.useContext(SelectContext);
  return (
    <div onClick={() => setValue(value)}>
      {children} {selected === value ? '✓' : ''}
    </div>
  );
}

Select.Option = Option;

Реализация через cloneElement

Альтернативный способ — использовать React.cloneElement для передачи пропсов дочерним элементам. Это проще, но менее гибко: если дочерний элемент уже имеет пропс с тем же именем, он будет перезаписан. Также сложно работать с глубоко вложенными компонентами.

function Select({ children }) {
  const [value, setValue] = React.useState('');
  return React.Children.map(children, child =>
    React.cloneElement(child, { value, setValue })
  );
}

function Option({ value, setValue, selected, children }) {
  return <div onClick={() => setValue(value)}>{children}</div>;
}

На что обратить внимание

• При использовании cloneElement не перезаписывайте пользовательские пропсы без необходимости — лучше объединять их.
• Context лучше подходит для сложных иерархий, так как не зависит от структуры дерева.
• Всегда проверяйте, что дочерние элементы являются ожидаемыми компонентами, чтобы избежать ошибок.

Вывод

Compound Components — мощный паттерн для создания гибких и интуитивных API. Используйте Context для масштабируемых решений, а cloneElement — для простых случаев, когда нужно быстро передать несколько пропсов. Это особенно полезно в библиотеках компонентов и сложных формах.