【React】在React中 JSX 代碼如何轉成 JS 代碼？

一、介紹

寫 React 代碼的朋友應該都是直接寫 JSX 代碼，JSX 讓我們可以在 JS 中直接寫 HTML 代碼，可閱讀性較高。本章節主要介紹 JSX 通過 babel 轉換後會生成什麼樣式代碼。

二、案例

1. div 標籤

<div></div>

通過 babel 轉換後：

React.createElement("div", null);

2. 帶 id 屬性的 div 標籤

<div id="leo">pingan</div>

通過 babel 轉換後：

React.createElement("div", { id: "leo" }, "pingan");

3. 帶有單個子元素的 div 標籤

<div id="leo" key="index">
  <span>hello</span>
</div>

通過 babel 轉換後：

React.createElement("div", {
  id: "leo",
  key: "index"
}, React.createElement("span", null, "hello"));

4. 帶有多個子元素的 div 標籤

<div id="leo" key="index">
  <span>hello</span>
  <span>hello</span>
</div>

通過 babel 轉換後：

React.createElement("div", {
  id: "leo",
  key: "index"
}, React.createElement("span", null, "hello"), 
   React.createElement("span", null, "hello")
);

5. 函數組件

function Leo (){
	return <span>hi leo!</span>
}

<Leo></Leo>

通過 babel 轉換後：

function Leo() {
  return React.createElement("span", null, "hi leo!");
}

React.createElement(Leo, null); 

需要特別注意的是：

在寫 React 組件時，約定組件名稱首字母必須是大寫。React.createElement 方法會根據第一個參數的首字母是否是大寫，來判斷要翻譯成變量還是字符串。

當我們組件首字母爲小寫時：

function leo (){
	return <span>hi leo!</span>
}

<leo></leo>

通過 babel 轉換後：

function leo() {
  return React.createElement("span", null, "hi leo!");
}

React.createElement("leo", null);

可以看出，React.createElement 第一個參數變爲字符串 "leo" 。對於 React 來說，第一個參數如果是字符串類型，則會被作爲 HTML 原生 DOM 節點來渲染，運行時便會報錯。

關於我

本文首發在 pingan8787個人博客，如需轉載請保留個人介紹。

Author	王平安
E-mail	[email protected]
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787/Leo_Reading/issues
ES小冊	js.pingan8787.com

微信公衆號