如何創(chuàng)建React Element

這篇文章主要介紹如何創(chuàng)建React Element，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在上一章節(jié)中，我們使用 create-react-app 工具搭建了一個(gè)基于 react 的開發(fā)環(huán)境，那么從這一章起，我們就正式開始 react 框架的學(xué)習(xí)。

打開 my-app 項(xiàng)目，找到 src/index.js 文件，我們在上一章中提到過，這個(gè)文件是整個(gè)應(yīng)用的入口，當(dāng)頁面刷新時(shí)，會主動去加載這個(gè)文件，那這里我們直接刪掉這個(gè)目錄下的其他文件，只保存 index.js 即可。然后刪除這個(gè)文件中的默認(rèn)代碼，并調(diào)用console.log("in")方法在控制臺上進(jìn)行輸出。

使用 yarn start 命令啟動項(xiàng)目，打開瀏覽器開發(fā)者工具，可以看到控制臺成功打印。使用腳手架工具搭建的開發(fā)環(huán)境中，已經(jīng)實(shí)現(xiàn)了熱加載的功能，也就是說，當(dāng)我們完成 js 代碼的修改之后，不在需要頻繁的通過刷新來查看頁面的效果，在每次修改保存之后，瀏覽器會自動的完成頁面的刷新。比如這里，我把這里輸出的字符串稍稍改一下，然后保存，可以看到控制臺已經(jīng)將剛剛修改的字符串輸出了。

React Element

好，回到 react 框架的知識點(diǎn)上，我們知道，一個(gè)頁面是由很多的節(jié)點(diǎn)元素組合在一起的，比方說，h2 元素，p 元素，ul 元素等等。那實(shí)際上，在 react 中，最小的組成單元也是元素，只是我們將它稱之為 react element。那么，我們?nèi)绾蝿?chuàng)建一個(gè) react element 呢？

比方說，這里我需要在頁面中顯示一個(gè) h2 的元素，里面是一個(gè) Hello World 字符串，那首先我就需要?jiǎng)?chuàng)建這樣的一個(gè) react element。

react 框架中，有兩個(gè)核心對象 React 和 ReactDOM。這里就可以通過 React 對象來創(chuàng)建一個(gè) h2 元素，首先引入這個(gè)對象。

import React from "react";

然后調(diào)用 createElement 方法來創(chuàng)建元素。這個(gè)方法的第一個(gè)參數(shù)是我們需要?jiǎng)?chuàng)建的節(jié)點(diǎn)類型，這里我需要?jiǎng)?chuàng)建一個(gè) h2 元素，那參數(shù)就是 h2，第二個(gè)參數(shù)是這個(gè)元素?fù)碛械膶傩栽O(shè)置，沒有屬性的時(shí)候可以直接給 null 的值，第三個(gè)參數(shù)就是該元素的子元素，這里我們需要在 h2 元素下顯示 Hello World，那我們就可以把這個(gè)字符串當(dāng)成它的子元素傳遞進(jìn)去。這個(gè)方法的返回值就是一個(gè) react element。我們可以在控制臺上打印這個(gè)對象。

const h2Ele = React.createElement("h2", null, "Hello World");
console.log(h2Ele)

從控制臺上我們可以看到，它就是一個(gè)普通的 javascript 對象，這個(gè)對象擁有一些屬性，用來描述真實(shí)的元素。比方說: 這里的 type 屬性就是用來描述這個(gè)元素的類型，也就是說這個(gè)對象映射的是一個(gè) h2 元素，同理，這里的 props.children 指的就是這個(gè)元素下面的子元素，也就是的 Hello World 字符串。

現(xiàn)在，我們完成了 react element 的創(chuàng)建，下一步就需要將這個(gè)元素變成真正的 DOM 節(jié)點(diǎn)添加到我們的頁面中去。這時(shí)，就需要使用 ReactDOM 對象來完成真實(shí)節(jié)點(diǎn)的渲染。首先引入這個(gè)對象。

import ReactDOM from "react-dom"

在 ReactDOM 對象上，有一個(gè) render 方法，就是專門用來將 react element 渲染成真實(shí) DOM 的。這個(gè)方法接收 2 個(gè)參數(shù)。第一個(gè)參數(shù)是我們需要渲染的 react element，這里我們就直接使用剛剛創(chuàng)建的那個(gè) h2 元素；第二個(gè)參數(shù)是需要將這些元素顯示到頁面的哪個(gè)地方。打開 index.html 頁面，我們可以發(fā)現(xiàn)，在這個(gè)頁面中有一個(gè)空白的 p 元素，這個(gè)元素我們稱之為叫容器，專門用來存放由 react 產(chǎn)生的這些元素的。那么這里，我們就可以把這個(gè)元素當(dāng)成 render 方法的第二個(gè)參數(shù)。保存之后，查看頁面，我們就可以看到在頁面上顯示了一個(gè) Hello World。

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

下一步，我們?nèi)绾谓o這個(gè)節(jié)點(diǎn)增加樣式呢？回到剛剛創(chuàng)建節(jié)點(diǎn)的那個(gè)方法，實(shí)際上，我們可以在這個(gè)方法的第二個(gè)參數(shù)中，來設(shè)置這個(gè)節(jié)點(diǎn)的樣式，比方說，我現(xiàn)在需要讓這個(gè) h2 的字體顏色變成紅色，那么直接指定 style color: red 就可以了。

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

除了使用 style 屬性以外，我們依然可以通過引入外部樣式表來修飾。這里我新建一個(gè) css 文件，添加一個(gè) class 選擇器，設(shè)置字體大小為 50px，然后在 index.js 中，我們使用 import 引入這個(gè) css 文件：

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

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

然后在創(chuàng)建這個(gè)元素的時(shí)候，指定這個(gè)元素的 className 為 msg 就可以了，這時(shí)我們可以看到這個(gè)樣式表就應(yīng)用到當(dāng)前這個(gè)元素了。

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

多個(gè)子元素的傳遞方式

接下來，我想再渲染一個(gè)列表應(yīng)該如何操作呢？比方說，在這個(gè)列表中要顯示 3 個(gè)選項(xiàng)，分別是 HTML，CSS 和 JAVASCRIPT。那我們第一步應(yīng)該要?jiǎng)?chuàng)建這些節(jié)點(diǎn)。

首先引入 React 對象，使用 createElement 方法創(chuàng)建第一個(gè) li 元素，第一個(gè)顯示 HTML，然后再創(chuàng)建兩個(gè)相同的元素，分別顯示 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")

子元素創(chuàng)建完成之后，我們再來創(chuàng)建一個(gè) ul 元素，因?yàn)檫@個(gè)ul元素有多個(gè)子元素，因此，這里有兩種方式可以來傳遞子元素，第一種，我們可以把每一個(gè)子元素都當(dāng)成參數(shù)傳遞給 createElement 方法

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

完成之后，將 ulEle 元素通過 render 方法渲染出來。查看頁面，可以看到列表已經(jīng)成功顯示。

第二種方法，我們還可以將這些子元素變成一個(gè)數(shù)組交給 createElement 方法完成渲染，查看頁面，我們可以看到列表依然正常顯示，但是控制臺給咱們拋出了一個(gè)警告:

這個(gè)警告的原因是，如果我們通過數(shù)組迭代的方式來創(chuàng)建子元素的話，我們需要給每一個(gè)子元素添加一個(gè)key的屬性，而且這個(gè)屬性的值，在同級元素中必須是唯一且不變的。那這里，我們給每一個(gè)li元素都增加一個(gè)key，值得話，讓他們保證唯一就可以了。再查看頁面，這時(shí)警告就消失了。

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")

當(dāng)然，這里我們還可以定義一個(gè)數(shù)組，然后通過迭代數(shù)組來產(chǎn)生這些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)

以上是“如何創(chuàng)建React Element”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！