使用 TypeScript 创建 React 上下文以共享状态

Question

我正在尝试使用 TypeScript 创建 React Context 以在组件之间共享状态。创建上下文时，我尝试将 null 作为初始值传递。

// contexts.ts file
import { createContext } from 'react';
export const AuthorContext = createContext(null);

但是当试图将 state value 和 setter function 传递给 Provider 的值时，这会导致问题，因为 无法分配给类型 null.

const [message, setMessage] = useState<string>("");

<AuthorContext.Provider value={{ message, setMessage }}>
    <Switch>
        <Route path={`${path}/first`} component={FirstContextContainer} />
        <Route path={`${path}/second`} component={SecondContextContainer} />
    </Switch>
</AuthorContext.Provider>

所以我尝试使用错误消息给我的类型定义创建一个 interface。

interface IStateStringDef {
  stateVal: string;
  setStateVal: React.Dispatch<React.SetStateAction<string>>;
}

并更新我的 Context 和 Provider。

// contexts.ts file
export const AuthorContext = createContext<IStateStringDef | null>(null); 

// file where provider is
<AuthorContext.Provider value={{ stateVal: message, setStateVal: setMessage }}>

这可行，但似乎不是最正确和优雅的方法，在 TypeScript 中创建和使用上下文的正确方法是什么？

Answer 1

您肯定需要上下文的接口或类型（例如 IStateStringDef）。

interface IStateStringDef {
    message: string;
    setMessage: React.Dispatch<React.SetStateAction<string>>;
}

而且你不需要 null, 您可以将默认值传递给上下文，例如 createContext<IStateStringDef>({ message: '', setMessage: () => {});

使用 TypeScript 创建 React 上下文以共享状态

Creating a React Context with TypeScript to share state

typescript

reactjs

use-context