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中的任何组件中使用上下文，但会在控制台中获得错误消息。

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

Answer 1

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

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

export { PositionContextProvider };

Answer 2

错别字：提供程序中缺少“ i”。

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

2 个答案: