javascript - React - 导出上下文提供程序给我错误：“元素类型无效：预期字符串 [...] 但得到：未定义”

Question

概括

我有一个文件，我在其中创建了一个带有 React Context Provider 的组件，我将其导出到另一个文件（参见代码）。但是当导入它时，它给了我一个错误。

已经尝试过导入文件的不同方法。但得到同样的错误。在组件中记录导入的 Provider 表明它存在。

代码

导出的文件

function PositionContextProvider({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };

进口

import { PositionContextProvider } from './PositionContext';

[...]

function Application() {
  return (
   <ContextQuery query={getPositions}>
    {({ data, loading, fetchMore, isFetchingMore }) => {
      return (
        <PositionContextProvider>
          ...
        </PositionContextProvider /> 
      )
    })}
   </ContextQuery />
  )
}

预期能够在 Provider 的任何组件中使用上下文，但会在控制台中收到错误消息。

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

标签： javascriptreactjsecmascript-6

Answer 1

将您的函数分配给变量，然后将其导出：

const PositionContextProvider = function({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };