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);