Question

在这一行：

import React, { Component } from "react";

为什么花括号只在Component周围而不是在'React'上？

Answer 1

Here's a great answer解释了ES6中的默认导入和命名导入

假设我们要导入一个名为Foo的类。如果要获取默认导出，则可以执行以下操作：

StoreID: 22325
EmployeeId: 15
.
.
.

如果我想要foo文件中的特定功能，可以使用花括号。

import Foo from './foo.js';

注意，这不是React功能，而是ES6。您可能正在使用babel将代码从ES6转换为ES5。

Answer 2

导入react将导入默认的react包，然后使用大括号的Component指定React包的特定元素。默认情况下，React不需要括号，因为它是默认的导入包。

import React, { Component } from "react";

希望这会有所帮助

Answer 3

In the React module default export是ssh-copy-id对象，并且它还有一个named export React ¹，如下所示：

Component

巧合的是，// assuming React and Component are predefined export default React export Component也可以在React对象上使用，因此尽管有些人喜欢您的方法，但也不必单独导入。例如，这是可能的：

Component

有关ES6模块语法的更多信息，请参见here。

¹注意，实际上React库没有上面示例中的命名导出// MyComponent.js import React from 'react' class MyComponent extends React.Component {}，但是Component是property on the default export，因此与Babel编译ES6软件包的方式一样，这将成为命名导出，其行为与上面的示例相同。

Answer 4

这是因为react库中的默认导出模块是React，并且即使可以导出许多其他组件，也只能有一个默认导出，但是默认只能导出一个。然后可以分解React库的其他组件。

Answer 5

React是一个包含不同方法的模块，当仅使用React word时，您将导入整个模块，因此可以使用React.Component（在这种情况下，点标记表示对模块内部方法的引用）。

那么，如果您需要导入方法？您将使用大括号，为什么？因为您可以在一个模块中的多个方法之间导入方法，所以它可以增加或减少，因此您可以在一个类或一个模块中导入{a，b，c，r，w，q}的方法，因此您可以看到如果您使用

import {Component} from 'react';

现在，您可以直接使用不带点引用的组件单词，例如react.component。

因此，默认情况下会导出React模块，在这里我需要所有React模块，并且我将使用所有方法使用它，{Component}在这里是按名称导出的，我需要从React库中获得特定的方法，而不是所有的react库

，也请检查它When should I use curly braces for ES6 import?

Answer 6

创建类似的反应。让我们以下面的示例为例。

someobject.js

const someobject = {
   somefunc1: ()=>console.log("hello 1"),
   somefunc2: ()=>console.log("hello 2")
}

export default someobject;

app.js

import someobject, { somefunc1, somefunc2 } from "./someobject";

someobject.somefunc1(); //hello 1
someobject.somefunc2(); //hello 2
somefunc1(); //hello 1
somefunc2(); //hello 2

出口违约

在React中命名为import

6 个答案: