【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	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推荐	https://github.com/pingan8787/Leo_Reading/issues
ES小册	js.pingan8787.com

微信公众号