Nextjs の問題 - プロパティの子が型 {} に存在しない
P粉658954914
2023-08-16 20:20:47
<p>React と Next.js を使用しています。以下は私のコードです。<code>children</code> 属性でエラーがスローされます。エラー メッセージは <strong>Property Children in type {} です。存在しません</strong></p>
<pre class="brush:php;toolbar:false;">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);</pre>
<p>インポートした次の関数のコンテキストでコードを記述するにはどうすればよいですか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
TypeScript と Next.js を使用してコンテキスト プロバイダー コンポーネントを作成しているようです。 「プロパティ 'children' は型 '{}' に存在しません」というエラーが発生する可能性が高いのは、TypeScript が関数コンポーネントの Children プロパティを認識しないことが原因です。
この問題を解決するには、StateProvider コンポーネントで Children 属性のタイプを明示的に定義します。その方法は次のとおりです:
リーリーStateProviderProps 型を定義し、それを使用して StateProvider コンポーネントの Children プロパティの型を指定すると、Children プロパティに関連する TypeScript エラーが発生しなくなります。