ReactJS4 - if语句及循环

个人来说,if/else用的比较少,条件运算符和循环倒是经常用

if/else条件语句以及条件运算符

if/else

Demo如下,直接就用就好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
class Demo extends React.Component{
render(){
let isAdmin = true;
if (isAdmin) {
return "管理员登陆成功";
} else {
return "用户登陆成功";
}
}
}

export default Demo;

当然,以上代码可以被重写为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';

class Demo extends React.Component{
render(){
let isAdmin = true;
let welcome = null;
if (isAdmin) {
welcome = "管理员登陆成功";
} else {
welcome = "用户登陆成功";
}

return(
<React.Fragment>
{welcome}
</React.Fragment>
)
}
}

export default Demo;

这样就只需要一个return()了。

条件运算符

当然,简单的if/else语句一般都可以替换成条件运算符,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';

class Demo extends React.Component{
render(){
let isAdmin = true;
let welcome = isAdmin ? "管理员登陆成功" : "用户登陆成功";

return(
<React.Fragment>
{welcome}
</React.Fragment>
)
}
}

export default Demo;

循环

直接上案例吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';

class Demo extends React.Component{
render(){
var list = ["o", "l", "l", "e", "h"];
var list2 = [];
for (let i = list.length-1; i >=0 ; i--) {
list2.push(list[i]);
}

return(
<React.Fragment>
{list2}
</React.Fragment>
)
}
}

export default Demo;

输出结果为:

hello

使用map代替循环

map还是蛮常用的,找别的代码现在基本上都不太使用循环而是直接用map了。如果不需要index的话,map挺适合处理数据的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from 'react';

class Demo extends React.Component{
render(){
var books = [
{图书id: 1, 书名: '飞狐外传', 分类: '武侠'},
{图书id: 2, 书名: '雪山飞狐', 分类: '武侠'},
{图书id: 3, 书名: '连城诀', 分类: '武侠'},
];

return(
<React.Fragment>
<table className="图书列表">
<caption>图书列表</caption>
<thead>
<tr>
<td>图书id</td>
<td>图书名称</td>
<td>图书分类</td>
</tr>
</thead>
<tbody>
{books.map(book=>{
return (
<tr>
<td>{book.图书id}</td>
<td>{book.书名}</td>
<td>{book.分类}</td>
</tr>
)
})}
</tbody>
</table>
</React.Fragment>
)
}
}

export default Demo;

输入出下:

有一点需要注意的就是,在使用map的时候,虽然会正常渲染,但是打开console的话会有如下报错信息:

Each child in a list should have a unique “key” prop.

Check the render method of Demo. See https://fb.me/ react-warning-keys for more information.

in tr (at Demo.jsx:25)

in Demo (at src/index.js:5)

这里只需要做如下修改就好了:

1
2
3
4
5
6
7
8
9
{books.map(book=>{
return (
<tr key={book.图书id}>
<td>{book.图书id}</td>
<td>{book.书名}</td>
<td>{book.分类}</td>
</tr>
)
})}

在元素中加入key也是React处理数据变动的一种方法。例如说数据突然发生了变动,{图书id: 1, 书名: '飞狐外传', 分类: '武侠'}变成了{图书id: 1, 书名: '新飞狐外传', 分类: '武侠'},在有了id的情况下,react只会对<td>1</td><td>飞狐外传</td><td>武侠</td></tr>这一段再渲染,而不会将整个页面重新渲染。

Reference

Understanding unique keys for array children in React.js

-------The end of this article  Thank you for your reading-------
0%