React.Context指的是UMD全局

Question

我创建了以下context.tsx：

import { createContext } from 'react';

export interface LibsAndComponentsInterface {
  data: unknown[];
}

export const LibsAndComponentsContext = createContext<
  LibsAndComponentsInterface | undefined
>(undefined);

并在我的包装组件中使用它：

import { ReactNode, useContext, useEffect, useMemo, useState } from 'react';
import { LibsAndComponentsContext } from 'core/context/dataContext';
import { useApiService } from 'common/hooks/useApiService';
import { useAuth } from 'common/contexts/Authentication';

// Wrap your App component with this
export function LibsAndComponentsProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [libs, setLibs] = useState<unknown[]>([]);
  const [components, setComponents] = useState<unknown[]>([]);

  const { isAuthenticated } = useAuth();
  const { sendRequest } = useApiService();

  useEffect(() => {
    .....
  }, []);

  const ctxValue = useMemo(
    () => ({
      data: [...libs, ...components],
    }),
    [libs, components],
  );

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

export function useLibsAndComponents() {
  const ctx = useContext(LibsAndComponentsContext);

  if (ctx == null) {
    throw new Error(
      'useLibsAndComponents must be inside LibsAndComponentsProvider',
    );
  }

  return ctx;
}

我现在得到了<LibsAndComponentsContext.Provider value={ctxValue}>返回的一个错误

'React‘指的是UMD全局文件，但当前文件是一个模块。考虑添加一个导入。使用JSX时，“‘React”必须在作用域内

我看不出我指的是什么模块，有人能帮我指出错误吗？

Answer 1

添加import React from "react";是令人尴尬的解决方案。