reactjs - Children ელემენტის ტიპს აკლია თვისებები Nextjs + React Context TypeScript-თან

Nextjs და TypeScript-ის გამოყენებით React-ის Context-ის გამოყენება აჩვენებს ბუნდოვან შეცდომას, როდესაც კონტექსტი ტარდება _app.tsx-ის გარშემო.

თუმცა, მიუხედავად იმისა, რომ მე ვპარებით მნიშვნელობებს Context Provider-ში, მას მაძლევს შეცდომას:

"ტიპს '{ children: Element; }' აკლია შემდეგი თვისებები ტიპიდან 'ContextProps': capturedPokemons, catchPokemon, releasePokemon"

აქ არის ჩემი _app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CaughtProvider>
      <Component {...pageProps} />
    </CaughtProvider>
  );
}

აქ არის კონტექსტი:

type PokemonProps = {
  number: string;
  name: string;
  image: string;
};

type ContextProps = {
  capturedPokemons: PokemonProps[];
  catchPokemon: (newPokemon: PokemonProps[]) => void;
  releasePokemon: (id: string) => void;
};

const CaughtContext = createContext<ContextProps>({
  capturedPokemons: [],
  catchPokemon: () => undefined,
  releasePokemon: () => undefined,
});

export const useCaught = () => useContext(CaughtContext);

export const CaughtProvider: React.FC<ContextProps> = ({ children }) => {
  const [capturedPokemons, setCapturedPokemons] = useState<any>([]);

  const catchPokemon = (newPokemon: PokemonProps[]) => {
    if (capturedPokemons.length >= 6) {
      alert('You cannot carry any more Pokemon.');
      return;
    }

    const alreadyCaptured = capturedPokemons.some(
      (p: PokemonProps) => p.name === newPokemon[0].name
    );

    if (alreadyCaptured) {
      alert('you already have that pokemon');
      return;
    }

    if (window.confirm('Capture Pokemon')) {
      setCapturedPokemons([...capturedPokemons, ...newPokemon]);
    }
  };

  return (
    <CaughtContext.Provider
      value={{ catchPokemon, capturedPokemons, releasePokemon }}>
      {children}
    </CaughtContext.Provider>
  );
};

აპლიკაცია კარგად მუშაობს, როგორც მოსალოდნელი იყო, და რაც ჩემთვის ცნობილია, ეს Plain React/JS-ში არასაიტიპო TypeScript-ის გარეშე ასე ხორციელდება.

პასუხი #1

თქვენ უნდა გქონდეთ ცალკე ტიპი CaughtProvider-ისთვის

type CaughtProviderProps = {
children: React.ReactNode
}

და გამოიყენეთ როგორც

CaughtProvider: React.FC<CaughtProviderProps>

ContextProps არის შენი context value-ისთვის, ამიტომ არ არის სწორი მისი გამოყენება CaughtProvider-ისთვის. CaughtProvider უბრალოდ კომპონენტია, რომელიც იღებს children პროპს. ამიტომ უკეთესი იქნება მისთვის სპეციალური ტიპის განსაზღვრა.