React js：如何解决多个导出？答案

【问题标题】：React js : how to resolve multiple export?React js：如何解决多个导出？
【发布时间】：2020-10-02 11:32:41
【问题描述】：

您好，我需要在 react js 中进行多次导出，但出现此错误第 84:3 行：解析错误：每个模块只允许一个默认导出。

这是我的代码：

  export default App;
  export default dashboardRoutes;

请问我应该怎么做才能解决这个问题！

【问题讨论】：

【解决方案1】：

您只能导出一个默认组件，而另一个是这样的：

export default MostImportantComponent
// other components
export {
    Component1,
    Component2,
    // ... etc
}

请注意，当您从其他文件导入其他组件时，您需要

import DefaultComponent from '...'
import { Component1, Component2 } from '...' // for other components

【讨论】：

请注意，如果从同一个文件中导入默认导出和命名导出，您可以像这样组合两种样式：import DefaultComponent, { Component1 } from '...';

【解决方案2】：

您可以使用命名导出或一个作为默认导出，另一个作为命名导出。

【讨论】：

【解决方案3】：

基本上有两种出口。

1.命名导出（每个模块零个或多个导出）：这允许您从一个 javascript 文件中导出多个模块，这就是您的问题。

您的情况的解决方案如下

modules.js

export {
App,
DashboardRoutes
};

app.js

import {App,DashboardRoutes} from './modules.js'

您同样可以在导入文件中更改这些模块的名称，如下所示

modules.js 页面

const module1=()=>console.log('module1');

export default module1

app.js
正在使用模块的页面

import MyModule from './modules.js'

您可以阅读更多关于它的信息here

【讨论】：

【解决方案4】：

定义函数

function sum(a, b) {
  return a + b
}
function sub(a, b) {
  return a - b
}
function mul(a, b) {
  return a * b
}

定义导出 export { sum, sub, mul }

你需要的导入函数 import { sum, sub } from 'myfile' 或所有功能 import * as myfunctions from 'myfile'

并调用为 sum(1+1) 或 myfunctions.sum(1+1)

【讨论】：