Inyectar accesorios en un componente es probablemente un caso de uso más popular para un componente de orden superior.
El componente original de página completa llama a una API para obtener algunos datos y luego los renderiza. Este comportamiento también puede ser extraído a un componente de orden superior que hará la llamada a la API cuando se monte y pase los datos al componente suministrado a través de sus puntales.
Lo primero que hay que hacer es definir una interfaz que describa los datos como un accesorio:
123interfaceThingsProps{ things:string[];}tipografía
y la firma de la función se verá entonces así:
1función conThings<TextendsThingsProps...;(Componente:Reaccionar.ComponenteTipo<T...)
tipografía
En este caso, la firma especifica que el atrezzo, de tipo genérico T, extiende la interfaz de ThingsProps, lo que significa que cualquier componente que se pase a esta función debe implementar esa interfaz en sus atrezzos.
Debido a que los accesorios de las cosas deben ser inyectados por el componente de orden superior, devolver un componente que acepte los mismos accesorios en los que se han introducido, como en el ejemplo del envoltorio anterior, sería incorrecto ya que cualquier consumidor del componente tendría que incluir un accesorio de las cosas. Este paquete contiene un operador de restar que toma un tipo T y le quita las propiedades que existen en el tipo T1. Este componente de orden superior podría entonces devolver un componente con accesorios del tipo Restar, lo que significa que los consumidores no necesitarían suministrar un accesorio para satisfacer el compilador de Typescript.
El código de la función está aquí:
123456789101112función conThings<TextendsThingsProps;(Componente:Reaccionar.TipoDeComponente<T;;} {retornoclasseextiendeReaccionar. Componente<Restar<T,CosasPropias;};{estado ={ cosas:[]asstring[]};asynccomponentDidMount(){cosasconst =esperarCosas();this.setState({ cosas });}render(){retorno<Componente{...this.propsasT} things={este.estado.cosas}/{;}};}tipografía
Donde la función de encabezado y pie de página devolvió un componente funcional, este componente necesita un estado y así devuelve un componente de clase. La definición de estado y el método componentDidMount son idénticos a los del componente original de página completa. Al renderizar este componente, además de pasar todos los props pasados al componente de orden superior usando {…this.props}, el things prop también se establece al valor actual de this.state.things, así que al consumir este componente el things prop se rellenará con los datos de la llamada al API. En este caso, this.props debe ser lanzado al tipo T, ya que de lo contrario, el compilador de Typescript arrojará un error.