reactjs - Hvordan korrekt skrive typer på children i React Context

I prosjektet lager jeg en React Context og jeg vil typisere barna riktig, men dessverre aksepteres kun typen "any" i codesandbox. Kan du se på det og foreslå hvilken type det bør være? Jeg vil gjerne unngå typen "any".

Slik blir Context.Provider implementert

const App = () => {
  return (
    <BrowserRouter>
      <PostsContextProvider>
        <HeaderComponent />
        <ButtonsNavigation />
        <Routing />
      </PostsContextProvider>
      <DownBar />
    </BrowserRouter>
  );
};

export default App;

Og her er Context-komponenten

interface PostsContextValues {
  posts: PostType[];
}

export const PostsContext = createContext<PostsContextValues>({
  posts: []
});

export const PostsContextProvider = ({ children }: any) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

takk !

Svar #1

Du kan spesifisere typen på children-propen i PostsContextProvider-komponenten slik:

export const PostsContextProvider = ({ children }: { children: React.ReactNode }) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

Her er children-propen av typen React.ReactNode, som representerer en React-node (f.eks. et element, tekst eller fragment). Dette er en fleksibel type som tillater at hvilken som helst type barn kan sendes til PostsContextProvider-komponenten.

Hvis du vil være mer spesifikk om typen barn som kan sendes, kan du lage et grensesnitt eller en type som representerer formen på barna og bruke det i stedet for React.ReactNode. For eksempel:

interface PostsContextProviderProps {
  children: JSX.Element | JSX.Element[]
}

export const PostsContextProvider = ({ children }: PostsContextProviderProps) => {
  // ...
};

Dette ville bare tillate at JSX-elementer eller et array av JSX-elementer blir sendt som children til PostsContextProvider-komponenten.

Relaterte artikler