【React整理系列】JSX语法学习

July 01, 2020 3447

【React整理系列】JSX语法学习

这是对官方文档的所涉及概念的补充，更多具体概念描述还请移步官方文档-JSX简介

JSX语法学习：

1
const element = Hello, world!;

JSX:既不是字符串也不是 HTML,是一个 JavaScript 的语法扩展。具有 JavaScript 的全部功能。这里需要注意的是：JSX自身也是一个表达式 ！！！

a. 在JSX中中使用变量：

如果需要在JSX中使用变量，则需要使用{}单个大括号对其表达式进行相应的包裹： 比如我们需要打印某个变量，则需要使用 **{ 变量名 }**的形式

1
2
3
4
5
const name = 'Josh Perez';const element = Hello, {name};
ReactDOM.render(
  element,
  document.getElementById('root')
);
b. 在JSX中使用JavaScript表达式（带返回值的函数/计算表达式等）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  
    Hello, {formatName(user)}!  
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
c. 使用括号包裹JSX语法（官方建议）

目的：避免分号陷阱（面试常问点：考察对JavaScript语法陷阱的理解） 我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到陷阱 关于一些JavaScript陷阱，有这样一篇非常优秀的博客（不只是这一个陷阱）**链接** 其中自动插入分号陷阱，这篇博客是这样描述的：

在语句结束时，你不必手动输入分号，换行即可。

1
2
3
4
5
6
7
function foo() {
 var bar = "value"
 return bar
}

// {} 包围的语句块的最后一个语句的分号也可省略
function bar() { return "foo" }

开发者们每写一行代码，就可以少敲打一次键盘，这看起来很人性化。但过于依赖分号自动插入，会带来一些潜在问题。

1
2
3
4
5
6
7
8
9
10
11
12
function foo() {
 return
 {
     bar: 1
 }
}

function bar() {
 var a, b, c, d, e
 a = b + c
 (d + e).toString()
}

看看上面的代码，foo() 将返回什么？ bar() 又将怎么运行？ 事实上，前者将返回 undefined ，而后者的后两行代码将被理解为 a = b + c(d + e).toString() 。 JavaScript 的分号自动插入的规则并不那么清晰可辨，老实地多敲几次键盘，可以避免那些让你摸不着头绪的bug在某一天突然出现。

d.在JSX中使用特定属性

既然用到了类似html的标签，那么肯定要为它指定html中的重要属性。 其中有一个很重要的知识点： 我们为元素指定class的时候，由于class与JavaScript中的class关键字重复，会影响到JavaScript对JSX语法的编译，所以，我们必须使用className来为html元素指定class属性。如：

1
2
3
const element = (
    hello,ax xgp
);

我们可以查看到渲染结果： 可见已经成功将属性进行了绑定。

e. 在JSX中，指定自定义属性的方法：

我们偶尔需要在html元素中指定我们自定义的相关属性，那么这时候我们就需要使用上面类似的做法，如：

1
2
3
4
const element = (
       hello,ax xgp
   );
   ReactDOM.render(element, document.getElementById("app"))

在这里插入图片描述 要注意，react对于自定义的属性，由于React 内部识别机制，最好全部使用小写格式，否则会出现如下所示的警告： 在这里插入图片描述

React无法识别 DOM 元素上的”selfAttribution”插槽。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写”selfattribution”。如果不小心将其从父组件传递，请将其从 DOM 元素中删除。

f.通过JSX指定子元素

其实也就是说我们可以类似用html的语法来对JSX进行描述，也就是可以嵌套使用html标签，同时与Vue相同，使用这种方式，必须有一个父元素（“子元素”定义就是这么来的）:

1
2
3
4
5
6
7
const element = (
  
    Hello!
    Good to see you here.
  
);
ReactDOM.render(element, document.getElementById("app"))
g.JSX内部默认防止XSS攻击

由于React DOM在渲染所有输入内容之前，默认会进行转义，所有的内容在渲染之前都被转换成了字符串，所以可以有效防止XSS攻击。

1
2
3
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = {title};
h. JSX无法直接表示对象

JSX中，如果直接将对象进行渲染，会报错：

1
2
3
4
5
6
7
8
9
10
//错误代码
const user = {
        firstName: 'ax',
        lastName: 'xgp'
    }
//下面的JSX中{user}这种写法是错误的
    const element = (
        hello,{ user}
    );
    ReactDOM.render(element, document.getElementById("app"))

报错信息如下： 在这里插入图片描述 想要进行对象的打印，必须进行toString()将其转换为字符串（但是一般也没有这种应用场景）：

1
hello,{ user.toString()}

打印结果也不同于Vue的处理： 在这里插入图片描述 总之就是：别用，通过循环将其转为数组，而数组打印见下文。

i.React通过数组进行列表渲染

列表渲染的应用场景很常见，在React中，通常用JSX数组来表示这个列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
let arrayShow = []
for (let item = 0; item < 5; item++) {
    let tempJSX = {item}
    arrayShow.push(tempJSX);
}
const element = (
    
        
            {arrayShow}
        
    
);
ReactDOM.render(element, document.getElementById("app"))

渲染结果： 在这里插入图片描述 检查元素： 在这里插入图片描述