Подписаться на блог

React Higher-Order Components

Несколько расстраивает, что сюда ничего не пишу, так что буду вкидывать какие-то заметки и кусочки кода.
Начнём с простого и понятного примера Higher-Order Components в React.

Enhance.jsx

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello, World!!!' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};

HigherOrderComponent.jsx

import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>React loading...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent);