iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

JavaScript 基礎修練系列 第 27

[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);

呈現畫面>>>
https://ithelp.ithome.com.tw/upload/images/20210927/20141293jsLidKxgR7.png

可從上方的程式結構看出,這樣透過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);

呈現畫面>>>
https://ithelp.ithome.com.tw/upload/images/20210927/20141293jsLidKxgR7.png

從上面JSX語法可以發現,只要把原本的html架構貼過來存到變數裡,最後再render到DOM內,就會是我們要的結果了。相較於原本的方式,整個架構是不是更簡潔、更好理解了呢?

總結
所以在實務上,基本上是不會再用createElement的方式,而是用更簡潔的JSX語法去建立React元素了。( 但是為了有更扎實的基礎,還是要理解一下底層的架構比較好。)


上一篇
[Day26] React - 設定屬性(style屬性 & 事件屬性)
下一篇
[Day28] React - 建立React 元件 (Component )
系列文
JavaScript 基礎修練30

尚未有邦友留言

立即登入留言