主页 / coding / 问题 / 76922002
Accepted
GBator
Asked: 2023-08-17 21:28:30 +0800 CST

如何为泛型提供上下文，但在不传入泛型的情况下使用上下文？

  • 772

基本上，我想要做的是创建一个上下文，在其中传递一个泛型，例如：

在父组件中：

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

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

在子组件之一中：

const { val } = useContext();

在这里，我不必传入泛型，并且 val 获取上下文提供程序中给出的泛型。这是为了在消费 val 时获得智能感知。

这可以通过纯反应实现吗？

我尝试将它放在一个类或一个钩子中（提供者和消费者都在同一组件下），但它似乎没有解决我的问题

reactjs

1 个回答

  1. Best Answer

    使用纯 React 无法直接实现您想要实现的目标。React 的上下文不会根据提供给提供者的泛型自动推断类型。但是，您仍然可以通过创建提供对上下文值的类型化访问的自定义挂钩来实现类似的目标。

    1. 创建一个自定义挂钩，提供对上下文值的类型化访问：

      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. 在您的组件中，使用 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

相关问题