【前端】JSX 原来只是一个表达式

简介: 【前端】JSX 原来只是一个表达式

正文


JSX 原来只是一个表达式:

  1. JSX 标签可以赋值给一个变量:

let content = <div>七镜</div>


  1. JSX 可以将其作为参数在调用函数时传过去:

alert('<input />')


  1. JSX 标签可以打印在控制台上:

console.log(<div>七镜</div>)


为什么上面 3 点能实现?这是因为 JSX 标签是函数调用。既然是函数调用,JSX 标签就是一个 JavaSript 表达式,可以写在任何能容纳表达式的地方。

下面这段代码是不能工作的:

const div = <div />;
div.appendChild("input");


之所以不能工作是因为 _jsx 创建的只是一个简单的对象,并不是 DOM 节点。所以它没有 appendChild 方法供我们调用!

目录
相关文章
|
5月前
|
JavaScript 前端开发
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
28 0
|
前端开发
前端学习笔记202307学习笔记第五十六天-react源码-Jsx如何让转换为ReactElement的过程2
前端学习笔记202307学习笔记第五十六天-react源码-Jsx如何让转换为ReactElement的过程2
34 0
|
前端开发
前端学习笔记202307学习笔记第五十六天-react源码-Jsx如何让转换为ReactElement的过程1
前端学习笔记202307学习笔记第五十六天-react源码-Jsx如何让转换为ReactElement的过程1
47 0
|
7月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
75 0
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程1
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程1
52 0
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程2
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程2
57 0
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程3
前端学习笔记202307学习笔记第五十九天-react源码-Jsx转换为ReactElement的过程3
56 0
|
前端开发
前端学习笔记202307学习笔记第六十天-实现jsx的打包4
前端学习笔记202307学习笔记第六十天-实现jsx的打包4
47 0
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-Jsx如何让转换为ReactElement的过程4
前端学习笔记202307学习笔记第五十七天-react源码-Jsx如何让转换为ReactElement的过程4
53 0
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-Jsx如何让转换为ReactElement的过程3
前端学习笔记202307学习笔记第五十七天-react源码-Jsx如何让转换为ReactElement的过程3
62 0