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

反应创建元素:这里’s How to Set it Up

关于反应创建元素的简介:

嘿大家!在本文中,我们’我将了解什么是React create元素。因此,在我们开始理解React元素之前,让’首先讨论一个文档对象模型。所以让’概述文档对象模型如何工作。 HTML是一组简单的指令集,浏览器在构造文档对象模型或DOM时遵循这些指令集。当浏览器加载HTML并呈现用户界面时,构成HTML文档的元素将成为球型元素。因此,基本上,我们使用HTML来构造文档对象模型元素。因此,这是我们的简单标题标签: 

<h1>  </h1>= document.createElement(“ h1”)  

 

在HTML中创建一个简单的标题级别元素与上述DOM语句相同。使用DOM API,您可以创建与使用HTML创建的相同DOM元素

在JavaScript中更新所有变化的渲染DOM元素相对容易。但是,插入新元素的过程非常缓慢。 

使用JavaScript有效地管理DOM元素会变得非常复杂且耗时。解决方案是React。 反应是一个旨在为我们更新浏览器DOM的库。使用React,我们不会直接与DOM API交互。取而代之的是,我们与虚拟DOM进行交互,或者与React用来构建UI并与浏览器进行交互的一组指令进行交互。虚拟DOM由react元素组成,在概念上看起来类似于HTML元素,但实际上是JavaScript对象。 

Now you know how browsers can understand HTML and use DOM to create user interfaces. 现在让’谈论React元素。浏览器DOM由DOM元素组成。同样,React DOM由React元素组成。

DOM元素和React元素可能看起来相同,但实际上却完全不同。 反应元素是对实际DOM元素的外观的描述。简而言之,React元素是有关如何创建浏览器DOM的说明。我们可以使用React.createElement方法创建一个react组件来表示h1标题标签。

反应.createElement(“ h1”,null,“第一到达元素”); 

 

因此,使用此方法可以创建一个React元素。第一个参数定义了我们希望创建的元素的类型 h1,跨度或段落。 您还可以定义组件。

第二个参数代表元素’的属性。我们目前尚未为h1前进轮胎指定任何属性。第三个参数代表元素 子级或innerHTML 文本。因此,react元素只是一个JavaScript文字,告诉React如何构造DOM元素。 

 

现在让’s talk about a 反应 DOM. A 反应 DOM contains the tools necessary to render 反应 elements in the browser. 反应 DOM is where we will find the render method now when you have your element in the DOM we need to append this element in the Dom tree so 反应 uses the append method to render this DOM element. 现在让’s看到这种方法是什么样的。这是我们简单的React或render方法: 反应DOM.render(element,containerElement);

 

在此render方法的第一个参数中,我们将指定要在浏览器上呈现的元素,第二个参数是要在其中附加子元素的容器元素,因此第二个参数是父节点,第一个参数是您的子节点。

 Now let’将先前创建的h1标题水箱放入render方法中,然后’s看起来应该是什么样子。因此,要创建一个React元素,我们将React对象与create element方法一起使用。现在,我们将创建一个React元素:

令h1 = 反应.createElement(“ h1”,{id:“ heading1”},“第一个React元素”);

 

第二个参数表示元素的属性,紧接着,我们将为h1标题标签指定一些文本。现在我只想在DOM中呈现此react元素,所以我只想说 反应DOM.render 然后我将调用render方法并首先指定我们的元素。

反应DOM.render(h1,document.getElementById(“ container”));

 

因此,在第一个参数上,我们将说h1,这是我的react元素并指定逗号,在第二个参数中,我将指定要在其中插入元素的父节点。

我想将我的元素插入除法标记中。因此,我在这里仅按ID说出document.getElement并指定元素的ID。执行此操作时,输出应如下所示:

 因此,您可以在h1标题标签中进行开发 

命令中指定的问题。

 

如何设置React Elements:

在学习如何创建react元素之前,了解在系统上设置和运行React的步骤和过程非常重要。我们知道React被称为React Create App的CLI,它将使我们能够快速引导我们的React项目。在这里,我们甚至可以使用Webpack进行热重装。我们需要全局安装这些软件包,以在系统上启动并运行必需的依赖项。我们可能使用以下命令:$ npm install -g create-react-app webpack 

因此,我们甚至可能必须在npm安装之前运行sudo,这将取决于我们如何设置节点。我们还将使用Create 反应 App的文件夹结构执行所有操作。

 

运行该应用程序:

我们将在项目目录中的终端中运行使用npm的React应用程序。我们使用以下命令:$ npm install &&npm开始。此命令应打开一个显示为空白屏幕的浏览器。就像这样,我们有了自己的React应用程序。

首先,让我们使用React.createElement()在React中创建一个非常基本的页面标题。因此,让我们打开index.js并开始。首先,我们需要做的是导入React库。

此后,我们将做第一个元素:

因此,在继续进行之前,让我们非常简单地讨论一下React.createElement()的参数。就我们而言’s an <h1>标签。这也可以是React的另一个组件。如果我们想创建一个HTML元素,我们将像上面的代码中一样将元素作为字符串传递。但是,如果要创建React组件,则需要传递为其分配了该组件的变量。

下一个参数是一个对象,其中包含在React术语中称为“ props”的属性,并将其传递给组件。但是我们现在不打算使用此参数,因为这仅仅是开始。

最后一个参数是该组件的子代。这也可以是带引号的字符串,就像我们上面所做的那样,其中内容被解释为文本。我们还可以做的另一件事是将引用传递给另一个组件。这使我们能够彼此相邻的元素和组件。 

 

准备好组件后,我们可以使用ReactDOM.render()将其呈现到页面中。它采用的两个参数是我们要呈现的内容和目标DOM。 

我们可以将其放在一行中,但这是在我们的ReactDOM.render()参数中添加中断的好方法。格式化允许我们保持代码干净。 

家长:

 

在知道了如何渲染事物之后,我们可以尝试使我们的应用程序更加复杂。我们可以通过引入子元素来做到这一点。首先,我们将制作一个用于渲染标题的元素,在其中我们将调用容器。这次,我们将传递引用而不是字符串。 

 

儿童的儿童:

在这里,可以根据需要嵌套任意数量的子级,并且甚至不需要在使用变量之前将它们存储在变量中,因为它们也可以内联声明。但是这样做的缺点是我们将获得一个可读性较低的代码。

 

属性的添加:

我们知道可以使用第二个元素将属性传递给元素。我们应该记住的一件事是,我们不应该使用Java类中的保留关键字(例如class)作为键。这是因为它可能会导致代码出现意外的意外行为。因此,在这里我们将使用className来命名我们的prop而不是class。

如果需要,我们还可以添加一些HTML属性,例如id,disabled等。我们可以使用它们的道具将自定义数据传递到所需的组件中。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

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

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