列表渲染

我们可以使用 JavaScript 的 map() 方法来创建列表。

初始化列表数据

 constructor(props) {
    super(props);
    this.state={
      list:[{name:'vue'},{name:'react'},{name:'angular'}]
    }
  }

 return (
      

        
        {this.state.list.map(
          (item,index)=>{
            return (
              
{item.name}
            )
          }
        )}
      
      
    );

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      list:[{name:'vue'},{name:'react'},{name:'angular'}]
    }
  }
  
  render() {
    return (
      
        
        {this.state.list.map(
          (item,index)=>{
            return (
              
{item.name}
            )
          }
        )}      
      
    );
  }
}

export default App;