版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
JSX中的表达式
JSX语法允许{}在结构中使用表达式。
一、在{}中直接渲染数据
// src/components/login/login.js
import React from 'react'
const str = '我从污秽和淤泥中复苏，我是灼热的青莲，我是，唯一的美。';
class Login extends React.Component {
render() {
return (
<div className="login">
{str}
</div>
);
}
}
export default Login
二、在{}中调用函数，并渲染其返回值
// src/components/login/login.js
import React from 'react'
function getNum(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
class Login extends React.Component {
render() {
return (
<div className="login">
{getNum(1, 100)}
</div>
);
}
}
export default Login
注：
- {}中必须是函数的调用，而不是函数指针；
- {}中的函数调用必须有返回值，否则会报错；
- 如果{}中调用的函数返回的值是一些无效值（undefined、null、[]等），那么JSX会选择不渲染；
三、在{}中写简单的表达式（三目运算或逻辑运算）
// src/components/login/login.js
import React from 'react'
const str_1 = '我从污秽和淤泥中复苏，我是灼热的青莲，我是，唯一的美。';
const str_2 = '我活在影子里，光，都是别人的，只会在死后被遗忘。';
function getNum(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
class Login extends React.Component {
render() {
return (
<div className="login">
{getNum(1, 100) < 50 ? str_1 : str_2}
</div>
);
}
}
export default Login
四、在{}中直接写代码块
// src/components/login/login.js
import React from 'react'
const str_1 = '我从污秽和淤泥中复苏，我是灼热的青莲，我是，唯一的美。';
const str_2 = '我活在影子里，光，都是别人的，只会在死后被遗忘。';
class Login extends React.Component {
render() {
return (
<div className="login">
{
function () {
return (
<div>
<p>{str_1}</p>
<p>{str_2}</p>
</div>
);
}()
}
</div>
);
}
}
export default Login
注：
- 如果要在JSX中，写代码块，那需要一个函数承接，这个函数要么是提前声明好的，要么是一个自执行函数；
- 在JSX表达式中的这个函数，如果要利用这函数渲染DOM元素，那要在函数中返回一个JSX的DOM节点（如上面代码示例）；
- 这种写法其实类似于混编，只不过在JSX中是HTML和JS的混编；
条件渲染
对于条件渲染，Vue、Angular以及小程序给的解决方案都是为标签绑定对应的指令，React的代码靠近JS底层，所以它的条件渲染和其他主流框架不同，在React中，需要利用JSX表达式，结合JS的条件语句实现条件渲染。
现在给一个简单的应用场景：某个组件中需要展示订单列表，当有订单列表信息时渲染订单列表，没有信息时做出信息为空的提示。
方案一（在渲染之前根据条件语句确定好最终要渲染的数据）：
// src/components/order-list/order-list.js
import React from 'react'
const orderList = []; // 需要展示在页面上的列表
// 提前声明好两个模块
const list = <div className="list">当有订单信息时展示</div>;
const empty = <div className="empty-list">当订单信息为空时展示</div>;
// 根据条件确定最终展示的模块，用overShow承接
const overShow = orderList.length > 0 ? list : empty;
class OrderList extends React.Component {
render() {
return (
<div className="order-list">
{/* 只需要在结构中渲染最终确定的数据即可 */}
{overShow}
</div>
);
}
}
export default OrderList
方案二（使用JSX的表达式直接在结构中进行条件判断）：
// src/components/order-list/order-list.js
import React from 'react'
const orderList = [];
class OrderList extends React.Component {
render() {
return (
<div className="order-list">
{
function () {
if(orderList.length > 0) {
return <div className="list">当有订单信息时展示</div>;
} else {
return <div className="empty-list">当订单信息为空时展示</div>;
}
}()
}
</div>
);
}
}
export default OrderList
方案三（使用&&运算符，应用场景：组件满足某个条件渲染，否则不渲染）：
// src/components/order-list/order-list.js
import React from 'react'
const flag = true;
class OrderList extends React.Component {
render() {
return (
<div className="order-list">
{
function () {
return flag && (<div>
当满足了flag条件时，当前函数返回这个div，否则返回false
</div>);
}()
}
</div>
);
}
}
export default OrderList
列表渲染
与条件渲染一样，列表渲染也不是指令，需要用循环：
方案一（根据某些数据提前将元素循环创建好）：
import React from 'react'
// 需要循环渲染的数据
const orderList = [{
id: 1,
date: '2019-05-01',
status: '待发货'
}, {
id: 2,
date: '2019-05-02',
status: '待发货'
}, {
id: 3,
date: '2019-05-03',
status: '待发货'
}];
// 循环创建元素列表(JSX的元素列表)
const elList = orderList.map((item, i) => {
return (<div key={i}>
<span>{item.id}</span>
<span>{item.date}</span>
<span>{item.status}</span>
</div>);
});
class OrderList extends React.Component {
render() {
return (
<div className="order-list">
直接渲染创建好的列表
{elList}
</div>
);
}
}
export default OrderList
可以看一下elList在控制台的输出结果:
注：elList是一个数组，数组中有若干对象，每个对象时JSX创建的元素。
elements中的呈现：
order-list中的三个div就是通过列表渲染实现的；
方案二（直接在JSX中用代码块循环创建列表）：
// src/components/order-list/order-list.js
import React from 'react'
// 需要循环渲染的数据
const orderList = [{
id: 1,
date: '2019-05-01',
status: '待发货'
}, {
id: 2,
date: '2019-05-02',
status: '待发货'
}, {
id: 3,
date: '2019-05-03',
status: '待发货'
}];
class OrderList extends React.Component {
render() {
return (<div className="order-list">
直接循环列表
{
orderList.map((item, i) => {
return (<div key={i}>
<span>{item.id}</span>
<span>{item.date}</span>
<span>{item.status}</span>
</div>);
})
}
</div>
);
}
}
export default OrderList
注: React规定，循环创建的元素中使用的key在其兄弟元素之间是独一无二的。