Reaccionar la implementación de componentes de alto nivel

Debido a la poderosa función de mezcla, hay muchos factores que no se preocupan por el mantenimiento del componente durante el desarrollo del componente de reacción, por lo que la comunidad de reacción ha propuesto un nuevo método para reemplazar la mezcla, es decir, componentes de gama alta;

Primero, instale los componentes de alto nivel requeridos en el proyecto:

npm install @ babel / plugin-request-decorators

Luego ingrese el comando npm eject, y luego busque webpack.config.js en el proyecto, encuentre la ubicación en la figura a continuación:

 

 

// añadir los siguientes elementos en los plugins de matriz, guardarlo 
[ ' @ Babel / plugin-decoradores-Propuesta ' , { " legado " : true }],

Después de la configuración: cree dos componentes: (MyContainer: componentes de orden superior), (MyComponent: componentes ordinarios)

Componentes avanzados: MyContainer / index.js

// 高阶 组件 myContainer 
import React, {Component} de  ' react ' ; 

const MyContainer = (WrappedComponent) => {
   clase de retorno  extiende Componente { 
    constructor (props) { 
      super (props); this .state = { 
        name: '' , 
      }; this .onNameChange = this .onNameChange.bind ( this ); 
    } 
    onNameChange ( evento ) { 
      console.log ( evento .target.value);
      este .setState ({
      
      
 
        nombre: event .target.value, 
      }) 
    } 
    render () { 
      const newProps = { 
        name: { 
          value: this .state.name, 
          onChange: this .onNameChange 
        } 
      } 
      return <WrappedComponent {... this .props} {. ..newProps}> </WrappedComponent> 
    } 
  } 
} 
exportar MyContainer predeterminado ;

Componentes comunes: MyComponent / index.js

// 需要 用 高阶 组件 中 的 peops 的 组件 
import React, {Component} de  ' react ' ; 
importar MyContainer desde  ' ../Mycontainer/index ' ; 

@MyContainer 
class MyComponent extiende Component { 
  componentDidMount = () => { 
    console.log ( this .props) 
  } 
  render () { 
    return <input name = " MyComponent " {... this .props.name} onChange = { this . props.name.onChange}> </input> 
  } 
} 
exportar predeterminado MyComponent;

En este punto, el componente MyComponent puede usar las propiedades y métodos públicos en los componentes de orden superior, lo que mejora la reutilización del código;