HOC Higher-Order Components как передать параметры?

Higher-Order Components (HOC) являются мощным инструментом в React и React Native для повторного использования логики компонентов. Они позволяют нам обернуть существующий компонент в функцию-обертку, которая может добавлять дополнительную функциональность.

Когда мы хотим передать параметры в HOC, мы можем использовать технику каррирования (currying) для создания фабрики HOC. Каррирование - это процесс превращения функции с несколькими аргументами в последовательность функций с одним аргументом. В нашем случае, мы можем создать функцию, которая будет принимать параметры и возвращать HOC.

Вот пример, который показывает, как мы можем передать параметр color в HOC:

import React from 'react';

const withColor = (color) => (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return <WrappedComponent color={color} {...this.props} />;
    }
  }
}

// Компонент, который мы хотим обернуть в HOC
class MyComponent extends React.Component {
  render() {
    const { color } = this.props;
    return (
      <div style={{ color }}>
        Hello, World!
      </div>
    );
  }
}

// Обертываем компонент в HOC с передачей параметра
const MyComponentWithColor = withColor('blue')(MyComponent);

// Используем обернутый компонент
const App = () => {
  return <MyComponentWithColor />;
}

export default App;

В этом примере мы создали фабрику HOC с именем withColor, которая принимает параметр color. Теперь мы можем обернуть наш компонент MyComponent в наш HOC withColor и передать значение blue параметром при использовании. В итоге, обернутый компонент MyComponentWithColor будет иметь доступ к переданному параметру color через this.props.color.

Таким образом, используя каррирование, мы можем передавать параметры в HOC и сделать их доступными для оборачиваемого компонента. Это позволяет нам создавать более гибкие и переиспользуемые компоненты с использованием Higher-Order Components в React и React Native.