React中的命名导入

Here's a great answer

假设我们有一个名为Foo的类,我想导入它。如果要获得默认导出,我将执行以下操作:

import Foo from './foo.js';

如果我想在foo文件中使用一个特定的函数,我会使用大括号。

import { fooFunction } from './foo.js';

注意,这不是React特性,而是ES6。您可能正在使用babel将代码从ES6传输到ES5。

在反应中创造类似的东西。让我们以下面这个例子为例。

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

export default someobject;

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

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

出口污损

In the React module 这个 default export 是 React named export Component ^1. ,大致如下:

// assuming React and Component are predefined
export default React
export Component

组成部分

// MyComponent.js
import React from 'react'

class MyComponent extends React.Component {}

可以找到有关ES6模块语法的更多信息 here .

请注意,实际上React库没有命名的导出 组成部分 然而,正如上面的例子所示 是一个 property on the default export 因此,由于Babel传输ES6包的方式,这将成为一个命名的导出,其行为如上面的示例所示。

Import react将导入默认的react包,带大括号的组件然后指定react包的特定元素。默认情况下,React不需要大括号,因为它是默认的导入包。

import React, { Component } from "react";

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

React是一个包含不同方法的模块,当使用just 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?