首頁 >web前端 >js教程 >建立React Element的方法介紹(詳細流程)

建立React Element的方法介紹(詳細流程)

不言
不言轉載
2018-10-29 15:40:167176瀏覽

這篇文章帶給大家的內容是關於創建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 字串。

建立React Element的方法介紹(詳細流程)

現在,我們完成了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 方法完成渲染,查看页面,我们可以看到列表依然正常显示,但是控制台给咱们抛出了一个警告:

建立React Element的方法介紹(詳細流程)

这个警告的原因是,如果我们通过数组迭代的方式来创建子元素的话,我们需要给每一个子元素添加一个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.com。如有侵權,請聯絡admin@php.cn刪除