React腳手架（4）數據渲染方式

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在其兄弟元素之間是獨一無二的。