Nextjs の問題 - プロパティの子が型 {} に存在しない

Question

React と Next.js を使用しています。以下は私のコードです。children 属性でエラーがスローされます。エラー メッセージは Property Children in type {} です。存在しません

import { NextPage } from "next";
import { createContext, useContext, useReducer, Dispatch } from "react";

import { GlobalStatesType } から "../types";
「../reducers」からレデューサー、{ ActionType、initialState } をインポートします。

エクスポート const StateContext = createContext<{
  状態: GlobalStatesType;
  ディスパッチ: Dispatch<ActionType>;
}>({
  状態: 初期状態、
  ディスパッチ: () => {},
});


import const StateProvider: NextPage = ({ Children }) => {
  const [状態、ディスパッチ] = useReducer(reducer、initialState);

  戻る （
    <StateContext.Provider value={{ 状態、ディスパッチ }}>
      { 子供たち }
    </StateContext.Provider>
  );
};

import const useStatesValue = () => useContext(StateContext);

インポートした次の関数のコンテキストでコードを記述するにはどうすればよいですか?

Answer 1

TypeScript と Next.js を使用してコンテキスト プロバイダー コンポーネントを作成しているようです。 「プロパティ 'children' は型 '{}' に存在しません」というエラーが発生する可能性が高いのは、TypeScript が関数コンポーネントの Children プロパティを認識しないことが原因です。

この問題を解決するには、StateProvider コンポーネントで Children 属性のタイプを明示的に定義します。その方法は次のとおりです:

リーリー

StateProviderProps 型を定義し、それを使用して StateProvider コンポーネントの Children プロパティの型を指定すると、Children プロパティに関連する TypeScript エラーが発生しなくなります。