反应：你可以导入具有不同名称的组件吗？

Question

我是 Nodejs + React 的新手，我想这是一个基本的 React 语法。我只是不习惯它来自另一种语言。我想确认一下我的说法是否正确：

我正在尝试一个开放的反应项目，该项目已成功部署并且肯定可以工作。

在入口文件中，index.js：

...some code...

import AdminLayout from "layouts/Admin/Admin.js";

...some code...


ReactDOM.render(
  <ThemeContextWrapper>
    <BackgroundColorWrapper>
      <BrowserRouter>
        <Switch>
          <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
          <Route path="/rtl" render={(props) => <RTLLayout {...props} />} />
          <Redirect from="/" to="/admin/dashboard" />
        </Switch>
      </BrowserRouter>
    </BackgroundColorWrapper>
  </ThemeContextWrapper>,
  document.getElementById("root")

对于组件AdminLayout，它是从 导入的layouts/Admin/Admin.js。AdminLayout但是，我检查了该文件，根本没有命名的变量，layouts/Admin/Admin.js如下：

 ...some code...

function Admin(props) {

 ...some code...

}

export default Admin;

只有被Admin导出。

那么，在react中，是否可以导入不同名称的组件呢？

我做了一些搜索，但无法对这个小细节进行任何描述。

Answer 1

这实际上与 React 无关，而是与Javascript 模块有关。

由于 Admin 组件是作为默认导出导出的：

export default Admin;

您确实可以使用任何名称导入它。

该行：是您可以更准确地看到那里发生的情况的import AdminLayout from "layouts/Admin/Admin.js";简写：您正在从中导入默认导出的模块并将其命名为 AdminLayout。import {default as AdminLayout} from "layouts/Admin/Admin.js";Admin.js

您也可以在文件中使用命名导出Admin.js：

export function Admin(props) {    
 ...some code...    
}

或者：

function Admin(props) {    
 ...some code...    
}

export {Admin}

在这种情况下，您必须使用其名称导入模块（显然这也是您的 React 组件的名称）：

    import { Admin } from "layouts/Admin/Admin.js";
    
    // In your render function you'll have at some point:
    // ... <Route path="/admin" render={(props) => <Admin {...props} />} />

但请注意，您也可以重命名导入的命名导出：

  import { Admin as AdminLayout } from "layouts/Admin/Admin.js";
        
  // In your render function you'll have at some point:
  // ... <Route path="/admin" render={(props) => <AdminLayout  {...props} />} />

还值得注意的是，虽然每个模块可以有多个命名导出：

export function Foo(){};
export const bar;

您只能有一个默认导出。