React js : 如何解决多重导出?

Question

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

这是我的代码：

export default App;
export default dashboardRoutes;

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

Answer 1

您只能导出一个默认组件，另一个组件如下所示：

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

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

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

Answer 2

基本上有两种类型的导出。

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

您的案例解决方案如下

模块.js

export {
App,
DashboardRoutes
};

应用.js

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

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

2. 默认导出(每个模块一个(：这允许您仅导出一个模块，这就是它向您显示错误的原因。这为您提供了在从中导入文件的使用所选名称的优势。

模块.js页

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

应用.js
使用模块的页面

import MyModule from './modules.js'

您可以在此处阅读更多相关信息

Answer 3

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

Answer 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)

来源：https://flaviocopes.com/how-to-export-multiple-functions-javascript/