В этой статье мы рассмотрим, как создать универсальный компонент высшего порядка (HOC) с помощью React и TypeScript. HOC — это мощный шаблон в React, который позволяет нам распределять логику между несколькими компонентами. Сделав наш HOC универсальным, мы можем еще больше повысить его возможность повторного использования и гибкость. Мы рассмотрим различные методы и предоставим примеры кода для демонстрации реализации.

Методы создания общего HOC:

1. Базовый компонент высшего порядка.
   Самый простой способ создать общий HOC — использовать функцию, которая принимает компонент в качестве аргумента и возвращает новый компонент. Вот пример:

import React, { ComponentType } from 'react';
function withGenericHOC<T extends object>(WrappedComponent: ComponentType<T>) {
  return function (props: T) {
    // Add your custom logic here
    return <WrappedComponent {...props} />;
  };
}

1. Добавление реквизитов.
   Вы можете расширить HOC, чтобы добавлять или изменять реквизиты перед их передачей в обернутый компонент. Вот пример добавления реквизита title:

function withTitle<T extends object>(WrappedComponent: ComponentType<T>, title: string) {
  return function (props: T) {
    const enhancedProps = { ...props, title };
    return <WrappedComponent {...enhancedProps} />;
  };
}

1. Доступ к состоянию компонента.
   Чтобы получить доступ к состоянию обернутого компонента и изменить его, вы можете использовать хук useStateв HOC. Вот пример:

import React, { ComponentType, useState } from 'react';
function withState<T extends object>(WrappedComponent: ComponentType<T>) {
  return function (props: T) {
    const [state, setState] = useState<any>(null);
    const onStateChange = (newState: any) => {
      setState(newState);
    };
    const enhancedProps = { ...props, state, onStateChange };
    return <WrappedComponent {...enhancedProps} />;
  };
}

1. Интеграция контекста.
   Вы можете интегрировать свой HOC с контекстом React, чтобы предоставить дополнительные данные или функции обернутому компоненту. Вот пример:

import React, { ComponentType, useContext } from 'react';
import MyContext from './MyContext';
function withContext<T extends object>(WrappedComponent: ComponentType<T>) {
  return function (props: T) {
    const contextData = useContext(MyContext);
    const enhancedProps = { ...props, contextData };
    return <WrappedComponent {...enhancedProps} />;
  };
}

Создание универсального компонента высшего порядка с использованием React и TypeScript может значительно улучшить возможность повторного использования и удобства сопровождения кода. Следуя методам, упомянутым в этой статье, вы сможете создавать универсальные HOC, которые можно легко применять к различным компонентам вашего приложения.