react循环

• react的循环就是将数组拼接成jsx对象，在里面添加事件

   import React from  'react'
   import ReactDOM from  'react-dom'

   let arr=['小红'，'小白'，'小黑'，'小紫']
   let arrHtml=[<li>小红</li>,<li>小白</li>,<li>小黑</li>,<li>小紫</li>,]

  class Mjc extends React Component{
         constructor(props){
              super(props)
         }
         render(){
               return(
                      <div>
                             <ul>{arrHtml}</ul>
                      </div>
               )
         }
   
   }

• 使用数组map方法，对每一项数据按照jsx的形式进行加工，最终得到一个每一项都有jsx对象的数组，在将数组渲染到模板中。

  //普通循环
    let listArr=this.state.list.map((item,index)=>{
        return (
            <li key={index}    onClick={(e)=>{this.clickEvent(index,item.title.e)}}>
                <div>{item.title}</div>
                <div>{item.content}</div>
            </li>
        )
    })
// 函数式组件循环
   function ListItem(props){
         return(
               <li>
                    <div>{props.data.title}</div>
                     <div>{props.data.content}</div>
               </li>
         )
   }
   let listArr=this.state.list.map((item, index)=>{
        return (
           <ListItem  data={item}  key={index} />
        )
    })
     render(){
         return(
              <div>
                  <ul>{listArr}</ul>
              </div>
         )
    }
  clikcEvent=（index,title,e）=>{
       console.log(index ,title,e)
}
 

变成函数式组件,因为有交互（点击事件），所以推荐使用类组件

   function ListItem(props){
         return(
               <li>
                    <div>{props.data.title}</div>
                     <div>{props.data.content}</div>
               </li>
         )
   }

变成类组件

   class ListItem  extends React Component{
      constructor(props){
         super(props)
     }
     render(){
          return(
                 <li  onClick={(e)=>{this.clikcEvent(this.props.index,this.props.data.title,e)}}>
                    <div>{this.props.data.title}</div>
                     <div>{this.props.data.content}</div>
               </li>
        )
     }
  }
  clikcEvent=（index,title,e）=>{
       console.log(index ,title,e)
}