Problème Nextjs - Les enfants de propriété n'existent pas sur le type {}

Question

J'utilise React et Next.js, ci-dessous mon code, il renvoie une erreur sur l'attribut children, le message d'erreur est Property children in type {} n'existe pas

importer { NextPage } depuis "suivant" ;
importer { createContext, useContext, useReducer, Dispatch } depuis "react" ;

importer { GlobalStatesType } depuis "../types" ;
importer un réducteur, { ActionType, initialState } depuis "../reducers" ;

export const StateContext = createContext<{
  états : GlobalStatesType ;
  répartition : répartition<ActionType>;
}>({
  états : état initial,
  expédition : () =>
});


export const StateProvider : NextPage = ({ enfants }) =>
  const [states, dispatch] = useReducer(reducer, initialState);

  retour (
    <StateContext.Provider value={{ states, dispatch }}>
      { enfants }
    </StateContext.Provider>
  );
} ;

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

Comment écrire le code dans le contexte de la prochaine fonction que j'ai importée ?

Answer 1

On dirait que vous utilisez TypeScript et Next.js pour créer un composant de fournisseur de contexte. L'erreur « La propriété 'enfants' n'existe pas sur le type '{}'" que vous rencontrez est probablement due au fait que TypeScript ne reconnaît pas la propriété enfants dans un composant de fonction.

Pour résoudre ce problème, vous pouvez définir explicitement le type d'attribut children dans le composant StateProvider. Voici comment procéder :

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

En définissant le type StateProviderProps et en l'utilisant pour spécifier le type de la propriété children dans le composant StateProvider, vous ne rencontrerez plus d'erreurs TypeScript liées à la propriété children.