保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

您需要了解的有关React JS导入的所有信息

关于React JS导入的简介

反应 JS是用于创建用户界面的说明性UI库。它基于不同的组件。 反应 JS导入允许构建总结组件以处理自己的位置。它提供了更简单的编程模型和出色的性能。 反应 JS用于在React Native Extension的帮助下创建Web应用程序甚至移动应用程序。全部由Facebook管理。 反应 JS不断发展’易于学习,并允许可重用​​的组件。大量的交互式组件使React Apps变得完整。从创建组件到导入和导出,所有这些共同使之有效。

输入 

JS世界在ES2015的支持下具有导入和导出模式的功能,因此发展更加迅速。为了理解“导入”的概念,我们需要学习各种组件的导入,反应并到达域,默认导入,图像和文件导入。导入需要模块余量。 反应允许将每个组件用作模块或命名参数来导入和导出它并执行基本操作。在这里,我们使用 进口作为导入特定模块的关键字。

导入任何模块,图像,外部文件所需的一个特定值是地址。这里的地址是指特定模块中所需的各个单个导入组件的相对位置,位于我们的React应用程序的根文件夹中。 反应 JS中的每个组件文件都需要导入模块以及要在特定模块中使用的其他静态文件。导入不会被文件系统继承,因此父组件进行的任何导入都不会’不适用于子组件,并且子组件的react文件必须进行自己的导入。

有多种方法可以将导入操作应用于React JS:

1.要导入默认导出–

如果该模块已使用以下命令导出了模块,则可以从ReactJS中的模块进行默认导入: 导出默认给定名称。  模块具有默认导出功能后,可以使用 进口 关键词。

 为了从任何文件导入默认导出,我们使用关键字 进口 然后 地址。 A 给定的名称 基于模块是可选的,可能不需要,也可能不需要。

这是要遵循的语法

句法

从ADDRESS导入GIVEN_NAME

例如。

从“反应”导入React

如果用于导入的模块中没有进行默认导出,则默认导入将导致错误。任何模块只能对功能或组件进行一次默认导出,并且如果导出多个,则必须使用命名导出。

  1. 导入命名的出口–

一个模块可能包含多个 使用语法从其文件中导出 导出给定名称。由于此处的导出没有默认设置,因此无法将这些特定功能或组件的导入设置为默认设置。当前组件的ReactJS文件中所需的模块中的每个模块或功能都需要导入,并具有各种名称参数。

要导入任何命名的导出,并使用多个逗号分隔逗号并使用大括号将其关闭,以使用多个参数。该语法的用法如下:

句法

从ADDRESS导入{PARA_NAME}

例如。

从“ react-dom”导入{渲染}’

例如。

从“反应路由器”导入{浏览器路由器,匹配项,小姐}’

可以非常方便地为导入指定自定义名称。这个决定完全取决于程序员。

例如。

从'react-router导入{Browser Router作为Router,Match,Miss}’

  1. 导入默认导出和命名值的组合–

模块可以包含默认值以及函数和值的命名导出的组合。不需要有关进口的其他信息。在这种情况下,我们将导入默认导出和命名值组件的组合。为此,我们对两者都应用了相同的语法,但是在一起:

句法

导入GIVEN_NAME,{PARA_NAME,… } 从 ADDRESS

例如。

从“ react-dom”导入React,{render}’

反应 作为默认导入导入,并且 渲染 作为命名导入。对于多个命名导出,只需在每个命名值之后的花括号内添加一个逗号(,),然后导入所需的值或函数。

  1. 导入图像–

在ReactJS中导入图像并非易事,因为有两种方法可以使图像可用。该图像可以添加到包含以下内容的“公共”文件夹中 的HTML 文件,也可以将图片添加到包含所有 零件 文件。在这里,首先,我们必须检查图像是在公用文件夹中还是在Src文件夹中。

来自“公共”文件夹的图片

要从公用文件夹导入图像,我们需要使用“ PUBLIC_URL”,要访问它,我们需要使用“%PUBLIC_URL%”

<link rel=”favicon icon” href=”%PUBLIC_URL%/ favicon.ico”/>

<link rel=”stylesheet” type=”text//css” href=”%PUBLIC_URL%/ styles.css”/>

例如–如果您的图像位于公用文件夹下但在子文件夹中

<img src=”%PUBLIC_URL%/ 我的照片.jpg” alt =”mypic”/> 

<img src=”%PUBLIC_URL%/图片/我的图片.jpg” alt =”mypic”/>5.

 

图片来自“ src”文件夹- 通过为导入的图像添加别名并为此使用自定义名称(而不是关键字),可以轻松地在react js中导入图像。与CSS导入不同,此导入返回一个字符串,该字符串用作引用图像或其他文件的地址。现在,可以轻松地在image标签的src属性或其他标签的href属性中使用地址字符串。

句法

从ADDRESS导入REF_NAME_FOR_IMAGE

例如。

从‘./images/srty.png导入srtyLogo’

<img src={SrtyLogo} />

例如。

从‘./mypic.jpg导入图片’

<img src = {pic} alt =“ 我的照片” />

 

  1. 导入文件–

导入静态CSS文件不会’甚至不需要混叠。这种类型的导入称为默认导入。 CSS(级联样式表),用于网页样式。

句法

导入地址

例如。

导入‘./css/normalize.css’

导入‘./css/bootstrap.css’

 

  1. 使用别名导入–

在这里,我们为导入指定了自定义名称。当组件名称很大时,我们必须在不同的地方使用它,而在导入时,我们给它指定一个自定义名称,以便可以轻松使用它。

句法

从ADDRESS以“ CUSTOM_NAME”的身份导入GIVEN_NAME

例如。

 从导入{Button as btn}‘component-library’;

例如。

进口*作为一切‘myComponent’;

在示例2中,我们已经导入了整个模块。

 

 

QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。