1：常规写法：数组里面放标签
list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>], {this.state.list2}
以上可知，只要把数组转换成以上格式，即可。
2：方法一
首先在this.state里面定义数组list: ['111', '222', '3333'],
写方法过滤，map循环遍历更改数组，返回一个li,把value放进去。
let listResult = this.state.list.map(function (value, key) { return <li key={key}>{value}</li> })
再把定义的变量放到模板里面。
<ul> {listResult} </ul>
3：方法二
在模板里面直接循环数据，数组里面写对象，首先把数组过滤一下，然后写代码：
{ this.state.list3.map(function (value, key) { return (<li key={key}>{value.title}</li>); }) }
参考代码：Home.js
import React, { Component } from 'react'; import photo from '../asset/images/photo.jpg'; import '../asset/css/index.css' class Home extends Component { constructor() { super(); //react定义数据 this.state = { list: ['111', '222', '3333'], list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>], list3: [ { title: "qqqqqqqq" }, { title: "qqqqqqqqeqwrq" }, { title: "qqqqrwrwrqqqq" }, { title: "qqqqqrwrwqqq" } ] } } render() { let listResult = this.state.list.map(function (value, key) { return <li key={key}>{value}</li> }) return ( <div> <ul> {listResult} </ul> {this.state.list2} <ul> { this.state.list3.map(function (value, key) { return (<li key={key}>{value.title}</li>); }) } </ul> </div> ) } } export default Home;
