React中的JSX-JXin的博客

温馨提示

该文章距离上次更新已经过去了 794 天，文章内容可能已经过时。

JSX基础语法
JSX语法规则
createElement方法

JSX基础语法

在React中，使用JSX来描述页面（Vue使用template来描述页面）

function App() {
  return (
		<div>Hello React</div> // 这就是一段JSX
	);
}

1
2
3
4
5

可以把JSX单独提取出来，例如：

function App() {
  const ele = <div>Hello react</div>;
  return ele;
}

1
2
3
4

这种类似于HTML的语法在React中称之为JSX，这是一种JavaScript的语法扩展。在React中推荐使用JSX来描述用户界面。JSX看起来像模板语言，但事实上它完全是在JavaScript内部实现的。

JSX语法规则

只能有一个根元素（可以使用空标签代替）
如果有多个根元素就会报错

使用空标签

function App() {
  return (
    <>
      <div>Hello React</div>
      <div>1234</div>
    </>
  );
}

1
2
3
4
5
6
7
8

在JSX中使用JavaScript表达式，表达式写在花括号{}中

function App() {
  const name = "jx";
  const ele = <div>{name}</div>;
  return ele;
}

1
2
3
4
5

属性值指定为字符串字面量，或者在属性值中插入一个JavaScript表达式

function App() {
  const id = "c";
  return (
    <>
      <div id="a"></div>
      <div id="b"></div>
      <div id={id}></div>
    </>
  );
}

1
2
3
4
5
6
7
8
9
10

style对应样式对象，class要写作className

function App() {
  return (
    <div
      style={{
        color: "red",
        fontSize: "20px",
      }}
    >
      Hello React
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12

function App() {
  return <div className="aa">Hello React</div>;
}

1
2
3

注释需要写在花括号里

function App() {
  return (
    <>
      {/* 这是一条注释 */}
      <div>Hello React</div>
    </>
  );
}

1
2
3
4
5
6
7
8

JSX允许在模板中插入数组，数组会自动展开所有成员

function App() {
  const arr = [<div key="1">Hello React</div>, <div key="2">1</div>, <div key="3">2</div>];
  return <>{arr}</>;
}

1
2
3
4

可以看到数组被自动展开了
JSX

createElement方法

JSX是一种JavaScript的语法扩展，Babel会把JSX转译成一个名为React.createElement函数调用

React.createElement(type, [props], […children])

type：创建的React元素类型（标签名字符串，React组件）
props（可选）：React元素的属性
children（可选）：React元素的子元素

以下两种写法作用是完全相同的：

function App() {
  return <div className: "red">Hello React</div>;
}

function App() {
  return React.createElement("h1", { className: "red" }, "Hello React");
}

1
2
3
4
5
6
7

打印出来可以看到两种方法的结果是一样的

const ele = <div className="red">Hello React</div>;
console.log(ele);
const ele1 = React.createElement("div", { className: "red" }, "Hello React");
console.log(ele1);

1
2
3
4

react中的createElement

可以看出，JSX的本质其实就是React.createElement方法的一种语法糖