React에서 고차 컴포넌트를 사용하는 예

이 글은 React에서 높은 수준의 컴포넌트를 사용하는 예를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

고차 구성요소

• HOC는 React의 표준 API가 아닙니다.

• HOC는 함수입니다.

• HOC는 Component을 반환합니다.

예:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

사용 시나리오

코드 재사용

React와 유사 버전 0.15 이전의 믹스인.

여러 컴포넌트가 코드 조각을 공유하거나 동일한 메소드를 공유하는 경우 HOC를 사용할 수 있습니다.

예:

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

온라인 예시

추상 상태 및 변경 소품

은 WrappedComponent로 래핑된 구성 요소의 공개 상태를 통해 추상화될 수 있습니다.

WrappedComponent로 래핑된 컴포넌트를 통해 수정, 추가 등의 소품을 전달할 수 있습니다. 🎜#조건은 다양합니다. 소품이나 상태 조건에 따라 Xuanran의 콘텐츠를 반환합니다.

예:

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

역상속

반환된 상위 구성 요소 클래스(Enhancer)는 WrappedComponent를 상속합니다.

예:

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

온라인 예시

위 내용은 React에서 고차 컴포넌트를 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!