React for循环渲染组件

通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件，下面看看怎么实现：

先来个有 If 判断的字组件循环渲染：

    
  render() {
    // 聊天列表组件
    function MsgList(props){
      const list = props.list;
        const listItems = list.map((item,idx) =>{
            if(item.messageSpecificType==1||item.messageSpecificType==6){
                return (
                  <div key={idx} className={styles.itemTxt}>
                       <div className={styles.name}>{item.nickName}：</div>
                       <div className={styles.msg}>{item.content}</div>
                       <div className={styles.time}> {item.sendTime}</div>
                   </div>
                )
            }else if(item.messageSpecificType==2){
                  return (
                    <div key={idx} className={styles.itemTxt}>
                         &l