时间戳

首页 > 解决方案 > 什么是“导入为”？

javascript - 什么是“导入为”？

问题描述

例如，在下面：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

Router, Route, Switch和之间有什么关系BrowserRouter？这是一种解构形式吗？

如果是这样，我认为解构是使用以下语法完成的：

  import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }

标签： javascriptreactjsecmascript-6import

解决方案

它与解构非常相似，但并不完全相同。当您想以不同的名称导入库的命名导出时，该as关键字是一个特殊的关键字。（有关命名导出的更多信息，请参见下文）

因此，当库开发人员从他们的库中导出函数或任何内容时，他们会编写如下内容：


export const someFunc = () => {};
export const someOtherFunc = () => {};
export const someThirdFunc = () => {};

这些被称为“命名导出”。当您编写类似的内容时，它们就是您要导入的内容

import { someFunc } from 'some-library';

那么as它是什么让您以您选择的新名称导入该命名导出。

import { someFunc as somePreferredName, someOtherFunc as someOtherPreferredName, someThirdFunc } from 'some-library';

您还可以将每个命名导入导入到单个对象中，如下所示：

import * as someLibrary from 'some-library';

然后你可以做类似的事情someLibrary.someFunc()；

或者您可以导入“默认导出”。默认导出包含的确切内容由库的作者确定，但通常默认导出等效于此答案前一部分中的语法。

所以在 React 的情况下，下面两行是等价的：

// import React from 'react';
import * as React from 'react'; // Imports every named export of 'react' and put it into an object named React.

把这一切放在一起

需要注意的是，React 特别需要你导入默认的 export。这不是 ES6 导入的东西，而是 React v16.x 的要求。对于其他包，您可以只导入一个包，它会按预期运行。

Lodash 是一个更简单的例子。对于 Lodash，导入默认导出相当于导入所有内容。

// Import the named export "debounce" from 'lodash' into a variable of the same name
import { debounce } from 'lodash';



// Imports the named export "debounce" from 'lodash' into a variable of your chosen name
import { debounce as anyNameYouWant } from 'lodash' 



// Imports the default export of 'lodash' into the object named anyNameYouWant
import anyNameYouWant, { debounce } from 'lodash'; // And then additionally, imports debounce into a variable of the same name

请注意，默认导入没有“as”关键字。它们没有命名为导出，因此当您导入它们时，您总是选择名称。这就是as允许您做的事情，但对于命名导出。

推荐阅读