[Day25] React - 建立React元素

建立元素

我们可以透过以下函式来建立一个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
 })