Examples of using higher-order components in React

The content of this article is about the use examples of high-level components in React. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Higher-Order Components

• HOC is not a standard API for React.

• HOC is a function.

• HOC returns a Component.

Example:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Usage scenarios

Code reuse

Similar to the mixin before React version 0.15.

HOC can be used when multiple components use a piece of code or the same method.

Example:

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

Online example

Abstract state and change props

can be wrapped by WrappedComponent The public state of the components is abstracted.

You can pass props for modification, addition, etc. through the component wrapped by WrappedComponent.

Example:

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

Xuanran hijacking

Conditional Xuanran. Return the content in Xuanran based on props or state conditions.

Example:

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

Reverse inheritance

The returned higher-order component class (Enhancer) inherits WrappedComponent.

Example:

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

Online example

The above is the detailed content of Examples of using higher-order components in React. For more information, please follow other related articles on the PHP Chinese website!