HOC – Higher-Order Components

• HOC-funktiolla voidaan lisätä komponentteihin ominaisuuksia, esimerkiksi:

  • Dataa palvelimelta tarjotaan suoraan props:ina

  • context-arvo luetaan props:ksi

./src/components/withUser.js

export default WrappedComponent =>
  class WithUser extends Component {
    state = {};
    async componentDidMount() {
      const response = await fetch('/api/user');
      const user = await response.json();
      this.setState({ user });
    }
    render() {
      return this.state.user
        ? <WrappedComponent {...this.props} {...this.state} />
        : 'Ladataan käyttäjätietoja...';
    }
  };

./src/components/App.js

import withUser from './withUser';

export default withUser(
  class App extends Component {
    render() {
      return <div>{this.props.user.name}</div>;
    }
  }
);

HOC