iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

JavaScript 基礎修練系列 第 25

[Day25] React - 建立React元素

建立元素

我們可以透過以下函式來建立一個React元素:

React.cloneElement(element, [props], [...children])

接下來,會針對每個參數做介紹:

假如我們要透過React元素的方式,來建立一個與下方一樣的html標籤:

<input id='myInput' type='number' class='my_class' for='input' readonly>

建立標籤

React.createElement("標籤名稱")

  • 引入套件: reactreact-dom
  • 使用React中的creatElement函式,來產生元素
  • 使用react-dom的render函式,將元素放進指定的位置
<div id='root'></div>
import React from "react";  //引入react套件,並存進React變數
import ReactDom from "react-dom";  //引入react-dom套件,並存進Reactdom變數

const e = React.creatElement("input") 
//產生一個"input"的React元素**,賦予給變數e

const rootElement = document.getElementById("root")
//選到id=root的元素,並存進rootElement變數

ReactDom.render(e, rootElement); 
//使用render函示,將e顯示在rootElement裡

設定屬性

React.createElement("標籤名稱",{屬性object})

  • createElement的第二個參數即是用來設定屬性,這裡要放的是一個object,是由key & value組合而成的。
  • 要注意的是由於class & for是JavaScript的保留字(有其他用途的字),所以在使用這裡個屬性時,必須改名為className & htmlFor
const e = React.createElement("input", {
	id: "input",
	type: "number",
	readOnly: true,    //用駝峰式命名
	className: "my_class",   //因class是保留字,所以要用className
	htmlFor: "input"   //因for是保留字,所以要用htmlFor
 }) 


上一篇
[Day24] React - 淺談SPA(single-page applications)
下一篇
[Day26] React - 設定屬性(style屬性 & 事件屬性)
系列文
JavaScript 基礎修練30

尚未有邦友留言

立即登入留言