React Context API 与 TypeScript 示例
这是一个使用 TypeScript 实现 React Context API 的简单示例，可以根据不同的使用场景进行调整。本示例基于存储待办事项数组（待办事项以字符串形式存储），并提供一个添加新待办事项的函数。但您可以将其替换为任何其他内容（并重命名为任何名称）。
类型
我喜欢先定义类型。在这个例子中，我们有待办事项（以字符串数组的形式存储），以及一个用于添加新待办事项的函数：
types.ts
export type TodosContextState = {
todos: string[];
addTodo: (name: string) => void;
};
上下文提供者
接下来，我们使用此类型创建一个提供程序组件，该组件存储我们希望通过上下文提供给其他组件的状态。
TodosProvider.tsx
import React, { createContext, useState, FC } from "react";
import { TodosContextState } from "./types";
const contextDefaultValues: TodosContextState = {
todos: [],
addTodo: () => {}
};
export const TodosContext = createContext<TodosContextState>(
contextDefaultValues
);
const TodosProvider: FC = ({ children }) => {
const [todos, setTodos] = useState<string[]>(contextDefaultValues.todos);
const addTodo = (newTodo: string) => setTodos((todos) => [...todos, newTodo]);
return (
<TodosContext.Provider
value={{
todos,
addTodo
}}
>
{children}
</TodosContext.Provider>
);
};
export default TodosProvider;
我们使用 `.` 为上下文设置默认值contextDefaultValues。对于函数，我们可以先将其设置为 `.`，() => {}以便在创建提供程序时设置它们之前，让 TypeScript 能够正常工作。
待办事项提供程序模块
我喜欢将我的 React 组件做成模块，所以这里是该TodosProvider模块的 index.ts 文件。
index.ts
export { TodosContext, default } from "./TodosContext";
消费语境
以下是使用待办事项上下文的示例。非常简单：
const { todos } = useContext(TodosContext);
在组件中使用它看起来会像这样：
Todos.tsx
import React, { useContext } from "react";
import TodosProvider, { TodosContext } from "./TodosContext";
const Todos = () => {
const { todos, addTodo } = useContext(TodosContext);
return (
<div>
<div>
{todos.map((todo, i) => (
<div key={i}>{todo}</div>
))}
</div>
<button onClick={() => addTodo("new todo")}>add todo</button>
</div>
);
};
export default () => (
<TodosProvider>
<Todos />
</TodosProvider>
);
注意：通过将Todos组件包裹在TodosProvider组件中
export default () => (
<TodosProvider>
<Todos />
</TodosProvider>
);
此上下文对其他组件（子组件除外）不可用。如果您希望多个组件共享此上下文，请将其向上移动组件树，使其覆盖所有需要使用它的组件。它甚至可以包裹整个应用程序。
完整示例
以下是 codesandbox 上的完整示例：
文章来源：https://dev.to/alexander7161/react-context-api-with-typescript-example-j7a