导入组件

Question

这是我的第一个React应用程序，因此非常容易回答。

要导入的组件：

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";

并且在我的render方法中，我只调用了该组件：

<DropdownPaging></DropdownPaging>

我收到以下错误：

尝试导入错误：“ DropdownPaging”未从中导出'./DropdownPaging'。

我关注了此示例：https://create-react-app.dev/docs/importing-a-component/

两个组件都在同一文件夹中。

Answer 1

您将DropdownPaging导出为default export，但是像其他导出一样将其导入。

要么更改导出：

export DropdownPaging;

或更改导入：

export DropdownPaging from './DropdownPaging';

Answer 2

我认为您的错误是在import statement上：

import { DropdownPaging } from "./DropdownPaging";

当使用居中括号{}导入某些内容时，您正在使用称为命名的导入，但是在DropdownPaging中，您正在进行default导出，以便修复错误您需要这样做：

import DropdownPaging from "./DropdownPaging";

如果您要使用命名的出口，解决方案是更改DropdownPaging组件上的出口，并使用{}保留进口：

// In the DropdownPaging component
export DropdownPaging

// In the component doing the import
import DropdownPaging from "./DropdownPaging";

您可以在此dev.to article上了解有关命名与默认导出的更多信息>

我还创建了一个codesandbox，其中包含一些有关如何在Javascript中使用不同类型的导入的示例（带有ES6）

Answer 3

这是使用命名导出和默认导出的方法