建立元素

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

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

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

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

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

建立標籤

React.createElement("標籤名稱")

• 引入套件: react 、react-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
 })