🤔 Что такое wrapper компонента?

Это компонент-обертка, который используется для обертывания других компонентов, предоставляя им дополнительные возможности или изменяя их поведение без изменения их исходного кода. Wrapper-компоненты часто используются в React для повторного использования логики, управления состоянием, стилизации и других целей.

🚩Задачи

🟠Повторное использование логики
Обертка может инкапсулировать общую логику, которая должна быть доступна нескольким компонентам.

🟠Добавление функциональности
Wrapper-компоненты могут добавлять новые функциональные возможности к обернутым компонентам.

🟠Стилизация
Обертка может использоваться для применения стилей к компонентам или для организации их в определенной структуре.

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

🚩Примеры использования

🟠Простая обертка для стилизации
Рассмотрим пример, где мы создаем обертку для применения стилей к любому компоненту.

import React from 'react';

// Wrapper-компонент для стилизации
const StyledWrapper = (props) => {
  const style = {
    border: '1px solid black',
    padding: '10px',
    margin: '10px'
  };

  return <div style={style}>{props.children}</div>;
};

// Компонент для обертки
const Content = () => {
  return <p>This is some content inside a styled wrapper.</p>;
};

// Использование Wrapper-компонента
const App = () => {
  return (
    <StyledWrapper>
      <Content />
    </StyledWrapper>
  );
};

export default App;

🟠Wrapper-компонент для управления состоянием
Рассмотрим пример, где обертка управляет состоянием и передает его обернутому компоненту через пропсы.

import React, { useState } from 'react';

// Wrapper-компонент для управления состоянием
const StateWrapper = (WrappedComponent) => {
  return (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count + 1);
    };

    return (
      <WrappedComponent count={count} increment={increment} {...props} />
    );
  };
};

// Обычный компонент
const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

// Использование Wrapper-компонента
const EnhancedCounter = StateWrapper(Counter);

const App = () => {
  return <EnhancedCounter />;
};

export default App;

🟠Wrapper-компонент для авторизации
Рассмотрим пример, где обертка проверяет, авторизован ли пользователь, и отображает либо обернутый компонент, либо сообщение о необходимости авторизации.

import React from 'react';

// Wrapper-компонент для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = /* логика проверки авторизации */ true;

    if (!isAuthenticated) {
      return <p>Please log in to view this content.</p>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Обычный компонент
const Dashboard = () => {
  return <h1>Welcome to the Dashboard</h1>;
};

// Использование Wrapper-компонента
const ProtectedDashboard = withAuth(Dashboard);

const App = () => {
  return <ProtectedDashboard />;
};

export default App;

Ставь 👍 и забирай 📚 Базу знаний