使用 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: () => {});