Exemples d'utilisation de composants d'ordre supérieur dans React-js tutoriel-php.cn

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

不言

Libérer： 2018-11-15 17:23:49

avant

2166 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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}/>
  }
}

Copier après la connexion

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
      }
    }
  }
}

Copier après la connexion

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

Copier après la connexion

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!