Exemples d'utilisation de composants d'ordre supérieur dans React

Le contenu de cet article concerne des exemples d'utilisation de composants de haut niveau dans React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Composants d'ordre supérieur

• HOC n'est pas une API standard de React.

• HOC est une fonction.

• HOC renvoie un Component.

Exemple :

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Scénario d'utilisation

Réutilisation du code

Similaire au mixin avant React 0.15.

HOC peut être utilisé lorsque plusieurs composants utilisent le même morceau de code ou la même méthode.

Exemple :

import React, { PureComponent } from 'react';

const Common = (WrapComponent) => {
  return (
    <div>
      <h1>Title</h1>
      <WrapComponent />
    </div>
  );
};

const Header = () => <div>Header</div>;
const Footer = () => <div>Footer</div>;

export default class extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <p>Header Component</p>
          {Common(Header)}
        </div>
        <hr />
        <div>
          <p>Footer Component</p>
          {Common(Footer)}
        </div>
      </div>
    );
  }
}

Exemple en ligne

L'état abstrait et les accessoires de changement

peuvent être passé L'état public du composant encapsulé par WrappedComponent est abstrait.

Les accessoires de modification, d'ajout, etc. peuvent être transmis via le composant enveloppé par WrappedComponent

Exemple :

const HOComp = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {name: ''};
    }

    componentDidMount() {
      this.setState({name: WrappedComponent.displayName || WrappedComponent.name || 'Component';});
    }

    return <WrappedComponent name={this.state.name} {...this.props}/>
  }
}

Détournement de rendu

Conditionnel. Rendu. Renvoyez le contenu dans Xuanran en fonction des accessoires ou des conditions de l'état.

Exemple :

const HOComp = (WrappedComponent) => {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

Héritage inversé

La classe de composant d'ordre supérieur renvoyée (Enhancer) hérite de WrappedComponent.

Exemple :

const EnchanceComponent = (WrappedCompopnent) => {
  return class extends WrappedCompopnent {
    constructor(props) {
      super(props);
      this.state = { error: '' };
    }
    componentDidMount() {
      /*do something*/
      super.componentDidMount();
    }
    render() {
      if (this.state.error) {
        return <p>{this.state.error}</p>;
      } else {
        return super.render();
      }
    }
  }
};

Exemple en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!