如何在 React 中导入函数组件？

Question

我有一个想要在我的应用程序中导入的功能组件，但我得到了：

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

检查ProjectDropContainer的渲染方法。

这是一个沙盒：

https://codesandbox.io/s/brave-voice-bdrx0

我尝试像这样导入 ProjectDropContainer：

import ProjectDropContainer from "./ProjectDropContainer";

或者像这样：

import {ProjectDropContainer} from "./ProjectDropContainer";

但还是一样！

我尝试根据（并且正在运行）的示例是：

https://codesandbox.io/s/github/emyarod/carbon/tree/dnd-uploader-codesandbox/packages/react/examples/drag-and-drop-file-uploader

Answer 1

您应该导出默认的 ProjectDropContainer 组件：

export default ProjectDropContainer

然后像这样导入它：

import ProjectDropContainer from "./ProjectDropContainer";

Answer 2

问题似乎是您正在从“carbon-components-react”导入未定义的FileUploaderDropContainer 并在您的ProjectDropContainer 组件中使用它。您的其他导入工作正常。检查文档中的“carbon-components-react”以查看 FileUploaderDropContainer 是否存在、其名称是否拼写正确以及它是否不在主模块的某个子目录中。