搜索
首页web前端js教程创建React Element的方法介绍(详细过程)

本篇文章给大家带来的内容是关于创建React Element的方法介绍(详细过程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

上一章节中,我们使用 create-react-app 工具搭建了一个基于 react 的开发环境,那么从这一章起,我们就正式开始 react 框架的学习。

打开 my-app 项目,找到 src/index.js 文件,我们在上一章中提到过,这个文件是整个应用的入口,当页面刷新时,会主动去加载这个文件,那这里我们直接删掉这个目录下的其他文件,只保存 index.js 即可。然后删除这个文件中的默认代码,并调用console.log("in")方法在控制台上进行输出。

使用 yarn start 命令启动项目,打开浏览器开发者工具,可以看到控制台成功打印。使用脚手架工具搭建的开发环境中,已经实现了热加载的功能,也就是说,当我们完成 js 代码的修改之后,不在需要频繁的通过刷新来查看页面的效果,在每次修改保存之后,浏览器会自动的完成页面的刷新。比如这里,我把这里输出的字符串稍稍改一下,然后保存,可以看到控制台已经将刚刚修改的字符串输出了。

React Element

好,回到 react 框架的知识点上,我们知道,一个页面是由很多的节点元素组合在一起的,比方说,h1 元素,p 元素,ul 元素等等。那实际上,在 react 中,最小的组成单元也是元素,只是我们将它称之为 react element。那么,我们如何创建一个 react element 呢?

比方说,这里我需要在页面中显示一个 h1 的元素,里面是一个 Hello World 字符串,那首先我就需要创建这样的一个 react element。

react 框架中,有两个核心对象 React 和 ReactDOM。这里就可以通过 React 对象来创建一个 h1 元素,首先引入这个对象。

import React from "react";

然后调用 createElement 方法来创建元素。这个方法的第一个参数是我们需要创建的节点类型,这里我需要创建一个 h1 元素,那参数就是 h1,第二个参数是这个元素拥有的属性设置,没有属性的时候可以直接给 null 的值,第三个参数就是该元素的子元素,这里我们需要在 h1 元素下显示 Hello World,那我们就可以把这个字符串当成它的子元素传递进去。这个方法的返回值就是一个 react element。我们可以在控制台上打印这个对象。

const h1Ele = React.createElement("h1", null, "Hello World");
console.log(h1Ele)

从控制台上我们可以看到,它就是一个普通的 javascript 对象,这个对象拥有一些属性,用来描述真实的元素。比方说: 这里的 type 属性就是用来描述这个元素的类型,也就是说这个对象映射的是一个 h1 元素,同理,这里的 props.children 指的就是这个元素下面的子元素,也就是的 Hello World 字符串。

1474145045-5bd42d1cba755_articlex.png

现在,我们完成了 react element 的创建,下一步就需要将这个元素变成真正的 DOM 节点添加到我们的页面中去。这时,就需要使用 ReactDOM 对象来完成真实节点的渲染。首先引入这个对象。

import ReactDOM from "react-dom"

在 ReactDOM 对象上,有一个 render 方法,就是专门用来将 react element 渲染成真实 DOM 的。这个方法接收 2 个参数。第一个参数是我们需要渲染的 react element,这里我们就直接使用刚刚创建的那个 h1 元素;第二个参数是需要将这些元素显示到页面的哪个地方。打开 index.html 页面,我们可以发现,在这个页面中有一个空白的 p 元素,这个元素我们称之为叫容器,专门用来存放由 react 产生的这些元素的。那么这里,我们就可以把这个元素当成 render 方法的第二个参数。保存之后,查看页面,我们就可以看到在页面上显示了一个 Hello World。

ReactDOM.render(h1Ele, document.querySelector("#root"))

下一步,我们如何给这个节点增加样式呢?回到刚刚创建节点的那个方法,实际上,我们可以在这个方法的第二个参数中,来设置这个节点的样式,比方说,我现在需要让这个 h1 的字体颜色变成红色,那么直接指定 style color: red 就可以了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  }
}, "Hello World");

除了使用 style 属性以外,我们依然可以通过引入外部样式表来修饰。这里我新建一个 css 文件,添加一个 class 选择器,设置字体大小为 50px,然后在 index.js 中,我们使用 import 引入这个 css 文件:

// theme.css
.msg {
  font-size: 50px;
}

// index.js
import "./theme.css"

然后在创建这个元素的时候,指定这个元素的 className 为 msg 就可以了,这时我们可以看到这个样式表就应用到当前这个元素了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  },
  className: "msg"
}, "Hello World");

多个子元素的传递方式

接下来,我想再渲染一个列表应该如何操作呢?比方说,在这个列表中要显示 3 个选项,分别是 HTML,CSS 和 JAVASCRIPT。那我们第一步应该要创建这些节点。

首先引入 React 对象,使用 createElement 方法创建第一个 li 元素,第一个显示 HTML,然后再创建两个相同的元素,分别显示 CSS 和 JAVASCRIPT。

const li_01 = React.createElement("li", null, "HTML")
const li_02 = React.createElement("li", null, "CSS")
const li_03 = React.createElement("li", null, "JAVASCRIPT")

子元素创建完成之后,我们再来创建一个 ul 元素,因为这个ul元素有多个子元素,因此,这里有两种方式可以来传递子元素,第一种,我们可以把每一个子元素都当成参数传递给 createElement 方法

const ulEle = React.createElement("ul", null, li_01, li_02, li_03)

完成之后,将 ulEle 元素通过 render 方法渲染出来。查看页面,可以看到列表已经成功显示。

第二种方法,我们还可以将这些子元素变成一个数组交给 createElement 方法完成渲染,查看页面,我们可以看到列表依然正常显示,但是控制台给咱们抛出了一个警告:

3537163397-5bd42f0626bdd_articlex.png

这个警告的原因是,如果我们通过数组迭代的方式来创建子元素的话,我们需要给每一个子元素添加一个key的属性,而且这个属性的值,在同级元素中必须是唯一且不变的。那这里,我们给每一个li元素都增加一个key,值得话,让他们保证唯一就可以了。再查看页面,这时警告就消失了。

const li_01 = React.createElement("li", { key: 0 }, "HTML")
const li_02 = React.createElement("li", { key: 1 }, "CSS")
const li_03 = React.createElement("li", { key: 2 }, "JAVASCRIPT")

当然,这里我们还可以定义一个数组,然后通过迭代数组来产生这些li元素,这样可以简化一下我们的代码:

const arr = ["HTML", "CSS", "JAVASCRIPT"]
const liEles = arr.map((item, index) => {
  return React.createElement("li", {
    key: index
  }, item)
})
const ulEle = React.createElement("ul", null, liEles)

以上是创建React Element的方法介绍(详细过程)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:segmentfault。如有侵权,请联系admin@php.cn删除
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境