¿Cómo crear un componente React genérico con un proveedor de contexto escrito?

Solución:

No sé TypeScript, por lo que no puedo responder en el mismo idioma, pero si desea que su proveedor sea “específico” para su MyList class, puede crear ambos en la misma función.

function makeList() {
  const Ctx = React.createContext();

  class MyList extends Component {
    // ...
    render() {
      return (
        <Ctx.Provider value={this.state.something}>
          {this.props.children}
        </Ctx.Provider>
      );
    }
  }

  return {
    List,
    Consumer: Ctx.Consumer 
  };
}

// Usage
const { List, Consumer } = makeList();

En general, creo que podría estar abstrayendo demasiado las cosas. El uso intensivo de genéricos en los componentes de React no es un estilo muy común y puede generar un código bastante confuso.

Tuve el mismo problema y creo que lo resolví de una manera más elegante: puedes usar lodash once (o crear uno mismo, es muy fácil) inicializar el contexto una vez con el tipo genérico y luego llamarlo desde dentro de la función y en el resto de los componentes puede usar el gancho useContext personalizado para obtener los datos:

Componente principal:

import React, { useContext } from 'react';
import { once } from 'lodash';

const createStateContext = once(<T,>() => React.createContext({} as State<T>));
export const useStateContext = <T,>() => useContext(createStateContext<T>());

const ParentComponent = <T>(props: Props<T>) => {
    const StateContext = createStateContext<T>();
    return (
        <StateContext.Provider value={[YOUR VALUE]}>
            <ChildComponent />
        </StateContext.Provider>
    );
}

Componente hijo:

import React from 'react';
import { useStateContext } from './parent-component';

const ChildComponent = <T>(props: Props<T>) => {
     const state = useStateContext<T>();
     ...
}

Espero que ayude a alguien

---

---

Utiliza Nuestro Buscador