Что такое паттерн Wrapper компонента

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

• Добавления стилей или классов
• Обработки событий
• Контроля пропсов или состояния
• Интеграции с контекстом или сторонними библиотеками

Пример:

const ButtonWrapper = ({ children, onClick }) => {
  return (
    <button 
      onClick={() => {
        console.log('Button clicked!');
        onClick?.();
      }}
      style={{ padding: '10px 20px', background: 'blue' }}
    >
      {children}
    </button>
  );
};

// Использование:
<ButtonWrapper onClick={() => alert('Clicked')}>
  Click me
</ButtonWrapper>

Паттерн помогает сохранять компоненты чистыми и переиспользуемыми.