[Day27] React - 建立子元素

建立子元素

React.createElement("标签名称",｛属性object}, "子标签")

createElement的第三个参数是用来传入子元素，这里要放的就是子标签。

• 若我们要用React元素，呈现以下html标签的样子:

<div>
  <h2>My to do list</h2>
  <ul>
    <li><p><span>第一点</span></p></li>
    <li>第二点</li>
  </ul>
</div>

• 使用React建立元素:

import React from "react";
import ReactDOM from "react-dom";

const h2 = React.createElement('h2', {}, 'My to do list');

const li_1 = React.createElement('li',{}, React.createElement(
  'p', {}, React.createElement(
    'span', {}, '第一点')));
    
const li_2 = React.createElement('li', {}, '第二点');

const e = React.createElement('div', {}, [h2, React.createElement('ul',{}, [
  li_1,
  li_2
])]);
  

const myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

呈现画面>>>

可从上方的程序结构看出，这样透过createElement一层一层建立元素的方式不是很直观，可读性很低。
如果我们用JSX语法，会变什麽样子呢?

使用JSX 建立子元素

import React from "react";
import ReactDOM from "react-dom";

const e = <div>
<h2>My to do list</h2>
<ul>
  <li><p><span>第一点</span></p></li>
  <li>第二点</li>
</ul>
</div>


const myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

呈现画面>>>

从上面JSX语法可以发现，只要把原本的html架构贴过来存到变数里，最後再render到DOM内，就会是我们要的结果了。相较於原本的方式，整个架构是不是更简洁、更好理解了呢?

总结
所以在实务上，基本上是不会再用createElement的方式，而是用更简洁的JSX语法去建立React元素了。( 但是为了有更扎实的基础，还是要理解一下底层的架构比较好。)