Início / coding / Perguntas / 76922002
Accepted
GBator
Asked: 2023-08-17 21:28:30 +0800 CST

Como contextualizar um genérico, mas usar o contexto sem passar no genérico?

  • 772

basicamente, o que eu quero fazer é criar um contexto onde eu passe de forma genérica como:

no componente pai:

const [val, setVal] = useState<ValType>();

<ContextProvider<!ValType!> val={val}>
..children components
</ContextProvider>

em um dos componentes filhos:

const { val } = useContext();

aqui não preciso passar no genérico e val pega o genérico dado no provedor de contexto. Isso é para obter intellisense ao consumir val.

Isso é possível com reação pura?

Tentei colocá-lo em uma classe ou gancho (provedor e consumidor no mesmo componente), mas não pareceu resolver meu problema

reactjs

1 respostas

  1. Best Answer

    O que você está tentando alcançar não é possível diretamente com o React puro. O contexto do React não infere tipos automaticamente com base no genérico fornecido a um provedor. No entanto, você ainda pode obter algo semelhante criando um gancho personalizado que fornece acesso digitado ao valor de contexto.

    1. Crie um gancho personalizado que forneça acesso digitado ao valor de contexto:

      import React, { createContext, useContext } from 'react';

type ValType = {
    // your properties
};

const ValContext = createContext<ValType | undefined>(undefined);

function useVal() {
    const context = useContext(ValContext);
    if (context === undefined) {
        throw new Error('useVal must be used within a ValProvider');
    }
    return context;
}

type ValProviderProps = {
    val: ValType;
    children: React.ReactNode;
};

function ValProvider({ val, children }: ValProviderProps) {
    return <ValContext.Provider value={val}>{children} 
           </ValContext.Provider>;
}

export { ValProvider, useVal };

    2. Em seus componentes, use o hook useVal

      import React, { useState } from 'react';
import { ValProvider, useVal } from './ValContext';

function ParentComponent() {
    const [val, setVal] = useState<ValType>();
    return (
        <ValProvider val={val}>
            {/* ...children components */}
            <ChildComponent />
        </ValProvider>
    );
}

function ChildComponent() {
    const val = useVal();
    // Use val here
}
    • 1

relate perguntas