Объяснение 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;

Читайте также
Что значат стабильные версии Firefox 119, Safari 17.1, Chrome 118 и Chrome 119 для веб-платформы
Что значат стабильные версии Firefox 119, Safari 17.1, Chrome 118 и Chrome 119 для веб-платформы
Что значат стабильные версии Firefox 119, Safari 17.1, Chrome 118 и Chrome 119 для веб-платформы

Браузеры Firefox 119, Safari 17.1, Chrome 118 и Chrome 119 стали стабильными. В этом обзоре рассказываем, что это значит для веб-платформы.

Конференция QCon: как бороться с поддельными ИИ-изображениями при помощи библиотек JavaScript
Конференция QCon: как бороться с поддельными ИИ-изображениями при помощи библиотек JavaScript
Конференция QCon: как бороться с поддельными ИИ-изображениями при помощи библиотек JavaScript

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

Тренды в мобильной разработке для 2024
Тренды в мобильной разработке для 2024
Тренды в мобильной разработке для 2024

2024 год мобильная разработка не просто следует за тенденциями, а формирует их. Попробуем выделить и изучить основные направления, а также определяющие тенденции в мобильных технологиях в этом году.

У Joomla 4.4.0 вышла русская локализация 
У Joomla 4.4.0 вышла русская локализация 
У Joomla 4.4.0 вышла русская локализация 

Известно, что работа над переводом Joomla на русский язык идёт на GitHub.