react中常见import的用法

一.对import React,{Component} from 'react’写法的解释 首先关于一下写法①的解释

import React,{Component} from 'react'1

作用相当于下面②和③这两句话

②导入react模块(组件)中的默认组件,并且命名为React

import React from 'react'1

③成员导入(member import 、named import): 引入react文件中的成员组件Component,可以用{}形式引入多个成员组件

import {Component} from 'react'1

其中③的意思是导入’react’中的成员Component组件,即:

Const Component = React.Component1

二.react中的import用法

//module可翻译为模块、组件。

//export可翻译为接口。

①导入默认组件(default import)

import a form 'module-name'1

导入’module-name’模块(组件)中的默认组件,命名为a

eg:

import React from 'react'1

②导入成员组件(member import 、named import),即导入单个接口(Import a single export from a module)

import {a} from 'module-name'1

导入’module-name’模块(组件)中的单个成员a组件,

eg:

import {Component} from 'react'1

③同时导入默认组件(default import)与成员组件(member import 、named import)

import a,{b} from 'module-name'1

导入’module-name’模块(组件)中的默认组件并命名为a,导入’module-name’模块(组件)中的b成员组件

eg:

import React,{Component} from 'react'1

④导入’module-name’模块(组件)中的成员组件a,并重命名为b

import {a as b} from 'module-name'1

⑤导入’module-name’模块(组件)中的所有组件,并命名为a

import * as a from 'module-name'1

如果a组件中包含一个doAllTheAmazingThings()接口(export),可以这样调用

a.doAllTheAmazingThings();1

参考文章:

Difference between import React and import { Component } syntax [duplicate]

import - JavaScript | MDN


评论 (1)

  • fienpoime Reply

    涉及广告推广,审核未通过

    Dec 15 2020 04:52 am

发表评论