Saltar al contenido

componentes de orden superior (Especial) en Reaccionar con examplesDec, 13thIn este tutorial, vamos a aprender acerca de lo que son de orden superior …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cuáles son los componentes de orden superior y cómo crearlo.

¿Cuáles son los componentes de orden superior (Especial)? componente de orden

El Superior es una función de JavaScript que tiene el otro componente como un nuevo componente de un argumento y regresa. componentes de orden más altas

nos ayudan a volver a utilizar la lógica de componentes.

ya hay algunas otras bibliotecas utilizando reaccionan hoc patrón como conexión en redux andwithRouter en una biblioteca reaccionar-router.

Crear componente de orden superior

Estamos creando un componente de orden superior que nos ayuda a registrar los puntales de componentes.

import React from "react";

function LogProps(MyComponent) {

class NewComponent extends React.Component {

componentDidMount() {
console.log(this.props); }

render() {
return ; }
}

return NewComponent;}

export default LogProps;

En el código anterior, hemos creado una función llamada LogProps que acepta otro componente como un argumento y regresar Newcomponent con los apoyos de registro.

Usando componente de orden superior

import React from "react";
import LogProps from "./hoc";
function Welcome(props) {
return

Welcome {props.name}

;
}

export default LogProps(Welcome);

Aquí nos importó LogProps componente y pasó componente de bienvenida como un argumento para que podamos seeWelcome puntales de componentes dentro de la consola del navegador.

import React from "react";
import Welcome from "./Welcome";

function App() {
return (

Hello React

);
}

¿has visto en la imagen de arriba Bienvenido apoyos componente objeto se registra dentro de la consola. Este

un ejemplo sencillo, aunque también puede crear componentes de orden superior para proteger sus rutas privadas de una manera similar.