代码之家 › 专栏 › 技术社区 › Guillermo Gutiérrez

为什么不能在默认对象内导出函数

create-react-app export ecmascript-6 reactjs javascript

0

Guillermo Gutiérrez · 技术社区 · 7 年前

我想知道为什么在使用 create-react-app :

/***** myLib.js *****/
const multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

也没有:

/***** myLib.js *****/
let multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

既不:

/***** myLib.js *****/
function multiplyByTwo(val) { return val * 2; };

export default { multiplyByTwo };

然后,在另一个文件中:

/***** main.js *****/
import { multiplyByTwo } from './myLib'

console.log(multiplyByTwo(10));

当我试图编译它时,我得到了这个错误:

Failed to compile.

./src/main.js
Attempted import error: 'multiplyByTwo' is not exported from './myLib'

但是,这是有效的:

/***** myLib.js *****/
export const multiplyByTwo = val => val * 2;

此外:

/***** myLib.js *****/
export let multiplyByTwo = val => val * 2;

3 回复 | 直到 7 年前

1

CertainPerformance 7 年前

区别在于 命名出口 以及 默认出口 .

当你使用 export default <expression> ,当您使用 import exprName from ... . 模块正在导出 expression 作为默认导出,以及 import exprName 获取该模块的默认导出并将其放入 exprName . 但是语法 import { exprName } 是什么 entirely different ;该语法表示要提取 命名出口 姓名 ExpReNe 来自模块。它不会破坏,即使看起来很像。

你的 myLib.js 没有的命名导出 multiplyByTwo (它只有一个 默认出口 一个物体,它有一个财产命名 乘法二 如此

import { multiplyByTwo } from './myLib'

失败。

使用命名的导出而不是从 myLib :

export const multiplyByTwo = val => val * 2;

然后可以用 import { multiplyByTwo } 您在其他地方使用的语法。

另一个选项,使用原始代码中的相同代码 迈利布 ,将导入默认导出对象,然后销毁它之后进口:

import myLib from './myLib';
const { multiplyByTwo } = myLib;

但这看起来有点奇怪。

2

1

SakoBu 7 年前

您所说的是默认导出和命名导出之间的区别:

假设你有一个app.js,如果你做了类似的事情

export default () => {
  // do something
}

这是一个默认的导出,仅限于一个这样的导入

import App from './App'

命名的导出类似于:

export const add = (a, b) => a + b;

这是一个命名的导出,用大括号导入它,如下所示:

import { app } from './app'

更多信息 here

3

0

Praveen Rao Chavan.G 7 年前

使用违约当导出是您想要的时候出口默认情况下,这意味着当其他文件导入此文件时,它们不需要指定要导入的特定名称,这称为 默认出口 .

例子:

import React from 'react';

在这种情况下,我们在导入时不指定特定的预期名称,这里反应也可以 反应默认导出 此名称是用户定义的名称。

来到 命名出口 ,当您要导出某个特定的东西时,需要用确切的名称导入,然后我们使用名称导出。

例子:

import React,{Component} from 'react';

在这成分是一个命名的导出,当我们使用 功能/无状态 组件我们不需要组件,因此可以避免导入它,但react是默认导出。