Rumah > Soal Jawab > teks badan
P粉4959559862023-08-17 10:03:15
Nampaknya anda menggunakan TypeScript dan Next.js untuk mencipta komponen penyedia konteks. Ralat "Kanak-kanak' Harta tidak wujud pada jenis '{}'" yang anda hadapi berkemungkinan besar kerana TypeScript tidak mengenali sifat kanak-kanak dalam komponen fungsi.
Untuk menyelesaikan masalah ini, anda boleh mentakrifkan secara eksplisit jenis atribut kanak-kanak dalam komponen StateProvider. Begini caranya:
import { NextPage } from "next"; import { createContext, useContext, useReducer, Dispatch, ReactNode } from "react"; // 导入ReactNode类型 import { GlobalStatesType } from "../types"; import reducer, { ActionType, initialState } from "../reducers"; type StateProviderProps = { children: ReactNode; // 定义children属性的类型 }; export const StateContext = createContext<{ states: GlobalStatesType; dispatch: Dispatch<ActionType>; }>({ states: initialState, dispatch: () => {}, }); export const StateProvider: NextPage<StateProviderProps> = ({ children }) => { // 使用StateProviderProps类型 const [states, dispatch] = useReducer(reducer, initialState); return ( <StateContext.Provider value={{ states, dispatch }}> {children} {/* 直接使用children */} </StateContext.Provider> ); }; export const useStatesValue = () => useContext(StateContext);
Dengan mentakrifkan jenis StateProviderProps dan menggunakannya untuk menentukan jenis harta kanak-kanak dalam komponen StateProvider, anda tidak lagi akan menghadapi ralat TypeScript yang berkaitan dengan harta kanak-kanak.