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

我不熟悉nodejs+react，我想这是一种基本的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")

只有

Admin

正在导出

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

---

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

这实际上与React无关，而是与React有关

由于管理组件导出为默认导出：

export default Admin;

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

行：

从“layouts/Admin/Admin.js”导入AdminLayout

是从“layouts/Admin/Admin.js”导入{default as AdminLayout}的shorhand在这里，您可以更准确地看到发生了什么：您正在从

Admin.js

导入默认导出的模块，并将其命名为AdminLayout

您还可以在

Admin.js

文件中使用名为导出的：

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

或：

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

---

您只能有一个默认导出。

这是否回答了您的问题@古鲁帕兰吉里塔兰是的，先生。非常感谢你！

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

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

export {Admin}

    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;