reactjs - React Context - Använd Provider med context som ContextName.Provider

Jag skapar ett sammanhang med TypeScript.

export const UserContext = createContext<
  { user: User; onChangeUser: (userId: string) => void } | undefined
>(undefined);

När man skapar leverantören som kommer att samla in barnelementen som en prop, uppstår följande fel

export function UserProvider({ children }: Props) {
  const [userId, setUserId] = useState<string | null>(null);

  // this error: Cannot find namespace 'UserContext'.
  return (
    <UserContext.Provider
      value={{
        user,
        onChangeUser: (userId: string) => {
          setUserData(userId);
        },
      }}
    >
      {children}
    </UserContext.Provider>
  );
}

Svar #1

Din fil behöver .tsx-tillägget istället för .ts.

I en .ts-fil kommer TypeScript att räkna <Type...>-uttryck som att du försöker kasta det följande uttrycket till typen Type..., istället för att hantera det som ett JSX-uttryck.

Relaterade artiklar