IT技术 - import React 和 import { Component } 语法的区别 - 吾爱随笔录

IT技术 reactjs ecmascript-6

2021-04-16 05:45:14

比如说，我们在 ES6 中使用 React。我们将 React 和 Component 导入为

import React from 'react'
import { Component } from 'react'

为什么语法不同？我们不能按照下面的说明使用吗？

import Component from 'react'

3个回答

下面是文档的import。

import React from 'react'

以上是默认导入。默认导入导出为export default .... 只能有一个默认导出。

import { Component } from 'react'

但这是一个成员导入（命名导入）。成员导入以export .... 可以有许多成员导出。

您可以使用以下语法导入两者：

import React, { Component } from 'react';

在 JavaScript 中，默认导入和命名导入是分开的，因此您不能像默认导入那样导入命名导入。下面，将名称Component设置为'react'包的默认导出（与React.Component:

import Component from 'react';

你忘了提到 React 没有默认导出，所以除非你使用黑客 Babel 预设，否则代码将无法工作......

2021-05-22 05:45:14

@Josmar 是的，我明白我表达得不是很好。做了一个编辑。:)

2021-06-11 05:45:14

在“从 'react' 导入组件；”这一行中，您不打算将“组件”称为 'react' 的默认导出吗？换句话说，Component 是 React 对象，默认从 'react' module导出，不为 null。我的意思是，默认导出不是命名导出，所以名称无关紧要。

2021-06-20 05:45:14

组件是一个命名导出。例如，因此必须使用 {} 对其进行解构。

React 是 React 从 'react' 的默认导出是正确的。例如导出默认react

澄清一下，没有解构进口这样的事情。在语法上它是相似的，但有一些有趣的差异。Kent C Dodds在这方面写了一篇有趣的文章

2021-05-25 05:45:14

什么是命名导出？

2021-06-01 05:45:14

@ScottSilvi 看起来这篇文章的链接已经失效。

2021-06-15 05:45:14

如果在任何文件中默认使用类似语句导出某些内容export default React，则可以像import React.

对于其他非默认导出，我们需要通过将其关闭在括号中来指定我们实际想要导入的内容，如import { Components}.

其它你可能感兴趣的问题