介绍JSX
什么是JSX?
const element = <h1>Hello, world!</h1>;
右边这种在javascript
中出现的HTML
语句就是JSX
语法,JSX
可以提供给你一个模板语言,快速开发前端UI组件,是javascript
前端框架中的利器之一。
React
通过JSX
可以快速的渲染出DOM
节点,现在我开始说说JSX
语法必备的一些基础知识。
这里重重声明,所谓的JSX一定是以标签为开端,以标签为终结的语句即为JSX,在React编译这段JSX时,会将它处理为一个javascript对象。同时React的语法基本是基于ES6的,所以希望读者可以执行学习ES6的基础知识
1.在JSX中可以掺杂表达式
如何插入呢,我们需要将任何插入JSX语句中的表达式都用一个大括号包括起来。
而所谓的表达式即javascript中的表达式,比如:1+1
,user.id
,和func(a,b)
等,综合为如下:
- 变量名
- JSX语句表达式(也就是说JSX其实也是一种表达式)
- 自执行函数表达式(如果只是单纯的函数定义表达式也可以,只是没有运行结果)
- 函数调用表达式
- 属性访问表达式
- 算法,关系,逻辑,字符串表达式
- 三元运算表达式
实例如下:
const use = "abc";
const user = {
firstName: 'tm7',
lastName: 'jxy'
};
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const t1 = 1, t2 = 2;
const a = <div>{
'abc'}</div>;
const a = <div>{
use}</div>;
const b = <div>{user.firstName}</div>;
const c = <div>{formatName(user)}</div>;
const d = <div