Der Inhalt dieses Artikels befasst sich mit den Verwendungsbeispielen von High-Level-Komponenten in React. Ich hoffe, dass er für Freunde hilfreich ist.
Komponenten höherer Ordnung
HOC ist keine Standard-API von React.
HOC ist eine Funktion.
HOC gibt ein Component zurück.
Beispiel:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Ähnlich dem Mixin vor React 0.15.
HOC kann verwendet werden, wenn mehrere Komponenten denselben Code oder dieselbe Methode verwenden.
Beispiel:
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>
);
}
}Abstrakte Zustands- und Änderungs-Requisiten
können umschlossen werden WrappedComponent Der öffentliche Zustand der Komponenten wird abstrahiert.
Requisiten für Änderungen, Hinzufügungen usw. können durch die von WrappedComponent verpackte Komponente weitergeleitet werden.
Beispiel:
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}/>
}
}Bedingtes Rendering. Geben Sie den Inhalt in Xuanran basierend auf Requisiten oder staatlichen Bedingungen zurück.
Beispiel:
const HOComp = (WrappedComponent) => {
return class Enhancer extends WrappedComponent {
render() {
if (this.props.loggedIn) {
return super.render()
} else {
return null
}
}
}
}Die zurückgegebene Komponentenklasse höherer Ordnung (Enhancer) erbt WrappedComponent.
Beispiel:
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();
}
}
}
};Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung von Komponenten höherer Ordnung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
