Saya menggunakan React dan Next.js, di bawah ialah kod saya, ia menimbulkan ralat pada atribut children, mesej ralat ialah Property children dalam jenis {} tidak wujud
import { NextPage } daripada "next"; import { createContext, useContext, useReducer, Dispatch } daripada "react"; import { GlobalStatesType } daripada "../types"; import reducer, { ActionType, initialState } daripada "../reducers"; eksport const StateContext = createContext<{ menyatakan: GlobalStatesType; penghantaran: Dispatch; }>({ menyatakan: initialState, penghantaran: () => }); export const StateProvider: NextPage = ({ children }) => const [states, dispatch] = useReducer(reducer, initialState); kembali ( { kanak-kanak } ); }; eksport const useStatesValue = () => Bagaimanakah saya boleh menulis kod dalam konteks fungsi seterusnya yang saya import?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }>({ states: initialState, dispatch: () => {}, }); export const StateProvider: NextPage = ({ children }) => { // 使用StateProviderProps类型 const [states, dispatch] = useReducer(reducer, initialState); return ( {children} {/* 直接使用children */} ); }; 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.