Объяснение Higher Order Components (HOC) в React.js

Популярный паттерн в библиотеке react.js HOC. Компонент высшего порядка работает очень похоже как HOF (функция высшего порядка), но передается для HOC аргумент в виде компонента. Один из способов переиспользования компонентов. Посмотрим пример:

// HOC компонент, универсально работающий для обычного выводящего текста компонента и выводящего инпут (ниже)
function withHover(WrappedComponent) {
  return function (props) {
    const [isHovered, setHovered] = useState(false);

    function handleMouseEnter() {
      setHovered(true);
    }

    function handleMouseLeave() {
      setHovered(false);
    }

    return (
      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <WrappedComponent {...props} isHovered={isHovered} />
      </div>
    );
  };
}

// Обычный компонент, принимающий текст и состояние Hovered
const TextComponent = ({ text, isHovered }) => {
  return (
    <>
      <p style={{ backgroundColor: isHovered ? "blue" : "white" }}>{text}</p>
    </>
  );
};

// Обычный компонент, принимающий nbg bygenf и состояние Hovered
const InputComponent = ({ type, isHovered }) => {
  return (
    <input
      type={type}
      style={{ backgroundColor: isHovered ? "blue" : "white" }}
    />
  );
};

// Создаем с помощью HOC 2 компонента
const TextComponentWithHover = withHover(TextComponent);
const InputComponentWithHover = withHover(InputComponent);

// И выводим в приложении 
const App = () => {
  return (
    <div className="App">
      <TextComponentWithHover
        text="Текст Loremru"
      />

      <InputComponentWithHover type="text" />
    </div>
  );
};

export default App;

Читайте также
Опубликовали релиз OpenSSH 9.5
Опубликовали релиз OpenSSH 9.5
Опубликовали релиз OpenSSH 9.5

OpenSSH — это 100% реализация протокола SSH 2.0. которая включает поддержку sftp-клиента и сервера.

В Django 5 появилось 5 новых функций
В Django 5 появилось 5 новых функций
В Django 5 появилось 5 новых функций

Django, веб-фреймворке Python, появились пять новых функций. Среди них: упрощенная визуализация полей и форм, поля модели для вычислений и генерируемые столбцы, больше декораторов асинхронного представления, обработка исключений для асинхронных отключений и другие.

Вышла Deta Space OS, которая управляется с помощью ИИ
Вышла Deta Space OS, которая управляется с помощью ИИ
Вышла Deta Space OS, которая управляется с помощью ИИ

Операционная система Deta Space OS для Интернета, которая управляется с помощью ИИ.

Веб-фреймворк Astro добавил правила аудита доступности
Веб-фреймворк Astro добавил правила аудита доступности
Веб-фреймворк Astro добавил правила аудита доступности

Теперь разработчикам будет предоставлена возможность получать предупреждения о неподдерживаемых атрибутах ARIA (Accessible Rich Internet Applications) и отсутствующих атрибутах, необходимых для ролей ARIA.