React中的列表渲染

React中的列表渲染

Vue.js中使用v-for 实现模板中的列表项循环渲染；
小程序中使用 wx:for 实现模板中的列表项循环渲染；
React中没有模板（即不需要v-for），也没有指令系统（即没有提供类似的机制）。

方法1:for循环遍历

import React, { Component } from 'react'

export default class App extends Component {
	// 假设服务器端返回如下
	state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
	booklist(){
		// 把服务器端返回的字符串数组转换为JSX数组
		let arr=[]
		for(let i=0;i<this.state.books.length;i++){
			arr.push( <li key={i}>《{this.state.books[i]}》</li> )
		}
		return arr
	}
	render() {
		return (
			<div>
				<ul>
					{this.booklist()}
				</ul>
			</div>
		)
	}
}

方法2：创建函数返回映射后的JSX数组

showList(){
	return   this.state.list.map( (e,i)=>JSX )
}
{this.showList() }

import React, { Component } from 'react'

export default class App extends Component {
	// 假设服务器端返回如下
	state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
	booklist(){
		// 把服务器端返回的字符串数组转换为JSX数组
		return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
	}
	render() {
		return (
			<div>
				<ul>
					{this.booklist()}
				</ul>
			</div>
		)
	}
}

方法3：直接绑定映射后的JSX数组

{
	this.state.list.map( (e,i)=>JSX )
}

import React, { Component } from 'react'

export default class App extends Component {
	// 假设服务器端返回如下
	state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
	render() {
		return (
			<div>
				<ul>
					{/*this.booklist()*/}
					{
						/*此处不能急 编写for循环——for不是表达式*/
						this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
					}
				</ul>
			</div>
		)
	}
}

以上几种方法出来的结果都是一样的,如下图所示