文脈APIを例証してください

異なったユースケースのために適応されることができるtypescriptによる反応文脈APIの簡単な例.この例は、todos(文字列として格納される)の配列を格納し、新しいtodoを追加する機能を提供することに基づいています.しかし、これは何でも置き換えられることができます(そして、何にでも改名されます).

種類
私は型定義を定義することから始めたいです.この場合、文字列配列として格納されているToDoSと、新しいToDoを追加する関数があります.
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を満足させるために.

ToDosProviderモジュール
私は自分の反応コンポーネントモジュールを作るのが好きです.のためのTSTodosProvider モジュールです.
index.ts

export { TodosContext, default } from "./TodosContext";

消費文脈
ToDOSコンテキストの使用例を示します.以下のように簡単です.

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>
);

このコンテキストは、他のコンポーネント(子コンポーネントを除く)には使用できません.このコンテキストを複数のコンポーネント間で共有したい場合は、コンポーネントツリーを移動します.アプリケーション全体をラップすることもできます.

完全な例
以下に例を示します.