React基础语法04-循环数组渲染数据的方法

• 2019 年 11 月 11 日
• 筆記

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;