創(chuàng)建 React Element

yanbingyun1990 發(fā)布于2019-08-23 12:34 / 3045人閱讀

摘要：現(xiàn)在，我們完成了的創(chuàng)建，下一步就需要將這個元素變成真正的節(jié)點添加到我們的頁面中去。那我們第一步應(yīng)該要創(chuàng)建這些節(jié)點。首先引入對象，使用方法創(chuàng)建第一個元素，第一個顯示，然后再創(chuàng)建兩個相同的元素，分別顯示和。

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

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

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

React Element

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

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

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

import React from "react";

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

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

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

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

import ReactDOM from "react-dom"

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

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

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

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

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

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

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

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

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

多個子元素的傳遞方式

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

首先引入 React 對象，使用 createElement 方法創(chuàng)建第一個 li 元素，第一個顯示 HTML，然后再創(chuàng)建兩個相同的元素，分別顯示 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)建一個 ul 元素，因為這個ul元素有多個子元素，因此，這里有兩種方式可以來傳遞子元素，第一種，我們可以把每一個子元素都當(dāng)成參數(shù)傳遞給 createElement 方法

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

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

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

這個警告的原因是，如果我們通過數(shù)組迭代的方式來創(chuàng)建子元素的話，我們需要給每一個子元素添加一個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")

當(dāng)然，這里我們還可以定義一個數(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)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98745.html

發(fā)表評論

登陸后可評論

0條評論

yanbingyun1990

男|高級講師

我要關(guān)注我要私信

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過病毒監(jiān)測

閱讀 2804·2021-09-01 10:30
JQ筆記

閱讀 1691·2019-08-30 15:52
仿stackoverflow highlight.js 選用哪種editor ？

閱讀 983·2019-08-29 18:40
Css Sprite 圖片等比縮放圖片大小（background-size優(yōu)化Sprites圖顯示）

閱讀 1139·2019-08-28 18:30
JS騷操作之?dāng)?shù)組快速排序

閱讀 2407·2019-08-23 17:19
小程序云開發(fā)之初體驗

閱讀 1335·2019-08-23 16:25
d3.js入門——selection與創(chuàng)建條形圖

閱讀 2715·2019-08-23 16:18
微信小程序發(fā)送模板消息！附前端+后端源碼~

閱讀 2992·2019-08-23 13:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

創(chuàng)建 React Element

相關(guān)文章

**圖解 React Virtual DOM**

**【譯】渲染Elements**

React源碼解析之ReactDOM.render()

React 內(nèi)部機(jī)制探秘 - React Component 和 Element（文末附彩蛋demo

React源碼解析之React.createElement()和ReactElement()

發(fā)表評論

0條評論

yanbingyun1990

男|高級講師

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過病毒監(jiān)測

JQ筆記

仿stackoverflow highlight.js 選用哪種editor ？

Css Sprite 圖片等比縮放圖片大小（background-size優(yōu)化Sprites圖顯示）

JS騷操作之?dāng)?shù)組快速排序

小程序云開發(fā)之初體驗

d3.js入門——selection與創(chuàng)建條形圖

微信小程序發(fā)送模板消息！附前端+后端源碼~

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

創(chuàng)建 React Element

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！