这是我的第一个反应应用程序，非常简单的问题。
要导入的组件：
import React, { useState } from "react";
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
const DropdownPaging = props => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>Dropdown</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Some Action</DropdownItem>
<DropdownItem disabled>Action (disabled)</DropdownItem>
<DropdownItem divider />
<DropdownItem>Foo Action</DropdownItem>
<DropdownItem>Bar Action</DropdownItem>
<DropdownItem>Quo Action</DropdownItem>
</DropdownMenu>
</Dropdown>
);
};
export default DropdownPaging;
消费组件：
import { DropdownPaging } from "./DropdownPaging";
在我的渲染方法中，我只是调用了组件：
<DropdownPaging></DropdownPaging>
我收到以下错误：
尝试导入错误：“DropdownPaging”未从“./DropdownPaging”导出。
我遵循了这个示例：https : //create-react-app.dev/docs/importing-a-component/
两个组件都在同一个文件夹中。
我认为您的错误在于import statement：
import { DropdownPaging } from "./DropdownPaging";
当您{}使用大括号导入某些内容时，您正在使用所谓的命名 import，但在DropdownPaging 中，您正在执行默认导出，以便修复您需要执行的错误：
import DropdownPaging from "./DropdownPaging";
如果您想使用命名导出，解决方案是更改DropdownPaging组件上的导出并将导入保留为 {}：
// In the DropdownPaging component
export DropdownPaging
// In the component doing the import
import DropdownPaging from "./DropdownPaging";
您可以在这篇dev.to 文章中阅读有关命名与默认导出的更多信息
我还创建了一个代码沙盒，其中包含一些关于如何在 Javascript 中使用不同类型导入的示例（使用 ES6）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句