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>
)
}
}
以上几种方法出来的结果都是一样的,如下图所示