Los componentes de orden superior o HOC es el método avanzado de reutilización de la lógica de funcionalidad del componente. Simplemente toma el componente original y devuelve el componente mejorado.
Sintaxis:
const EnhancedComponent = higherOrderComponent(OriginalComponent);
Razón para usar el componente de orden superior:
- Facil de manejar
- Deshazte de copiar la misma lógica en cada componente
- Hace que el código sea más legible
Creando la aplicación React:
-
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Estructura del proyecto:
Ejemplo 1: digamos que necesitamos reutilizar la misma lógica, como pasar el nombre a cada componente.
Name.js
import React from 'react' const EnhancedComponent = (OriginalComponent) => { class NewComponent extends React.Component { // Logic here render() { // Pass the callable props to Original component return <OriginalComponent name="GeeksforGeeks" /> } } // Returns the new component return NewComponent } export default EnhancedComponent;
App.js
import React from "react"; import "./App.css" import EnhancedComponent from './Name' class App extends React.Component { render() { // Call the props from originalComponent return <h1>{this.props.name}</h1> } } // Passed the originalcomponent export default EnhancedComponent(App);
Salida: aquí, pasamos el nombre como accesorio con el valor para llamar desde diferentes componentes.
Ejemplo 2: En este ejemplo, implementemos algo de lógica. Hagamos una aplicación de contador. En HighOrder.js, pasamos handleclick y mostramos accesorios para llamar a la funcionalidad del componente.
Estructura del proyecto:
HighOrder.js
import React from 'react' const EnhancedComponent = (OriginalComponent) => { class NewComponent extends React.Component { constructor(props) { super(props); // Set initial count to be 0 this.state = { count: 0 }; } handleClick = () => { // Incrementing the count this.setState({ count: this.state.count + 1 }); } render() { // passed a handleclick and count in the originalComponent // as a props for calling and adding the functionality return <OriginalComponent handleclick={this.handleClick} show={this.state.count} /> } } // Returns the new component return NewComponent } // Export main Component export default EnhancedComponent
App.js
import React from 'react' import "./App.css" // importing HighOrder file import EnhancedComponent from './HighOrder' class App extends React.Component { render() { // Destructuring the props const { show, handleclick } = this.props // Calling out the props return <button onClick={handleclick}>{show} </button> } } export default EnhancedComponent(App);
Producción:
Referencia: https://reactjs.org/docs/higher-order-components.html
Publicación traducida automáticamente
Artículo escrito por shiv_ka_ansh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA