React入门-6.列表渲染_React

上一篇: react 实战下一篇:react下移动端可吸附悬浮窗，悬浮...

React入门-6.列表渲染

发布时间：2019-06-10 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了React入门-6.列表渲染，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

列表渲染
在React中，将一个列表渲染到页面中的方式与JS遍历数组打印到控制台的思路类似。个人觉得这个没有VUE的列表通过指令在编写代码上简单。
React的思路是在render中遍历集合，然后迭代渲染出React Element,最后返回。需要注意的是迭代产出的React Element需要添加key属性用于标识每个元素。react在动态删除，修改，添加节点的时候需要识别他们。
案例如下：

      
      
      ame:'tom'},{id:2,name:'jacky'},{id:3,name:'lisa'}]
      }))
    }
    // 列表渲染，先将列表渲染到一个变量中,然后再设置到ul标签中进行返回
    render(){
      let list = this.state.users;
      return (
        
          {
            list.map((ITem)=>{
              return ({item.name})
            })
          }
        
      )

      /*
      let list = this.state.users.map((item)=>{
        return (
          // key属性帮助react识别每个li，在添加节点，移除节点，修改节点的时候都会用到，一般要唯一标识
          {item.name}
        );
      })
      return (
        {list}
      )
      */
    }
  }
  ReactDOM.render(,document.getElementById('app'));" title="" data-original-title="复制">

  class MyList extends React.component{
    constructor(PRops){
      suPEr(props);
      this.state = {users:[]}
    }
    // 组件绑定的时候为state赋值
    componentDidmount(){
      this.setState(state=>({
        users:[{id:1,name:'tom'},{id:2,name:'jacky'},{id:3,name:'lisa'}]
      }))
    }
    // 列表渲染，先将列表渲染到一个变量中,然后再设置到ul标签中进行返回
    render(){
      let list = this.state.users;
      return (
        <ul>
          {
            list.map((item)=>{
              return (<li key={item.id}>{item.name}</li>)
            })
          }
        </ul>
      )

      /*
      let list = this.state.users.map((item)=>{
        return (
          // key属性帮助react识别每个li，在添加节点，移除节点，修改节点的时候都会用到，一般要唯一标识
          <li key={item.id}>{item.name}</li>
        );
      })
      return (
        <ul>{list}</ul>
      )
      */
    }
  }
  ReactDOM.render(<MyList/>,document.getElementById('app'));@H_171_126@
脚本宝典总结
       以上是脚本宝典为你收集整理的React入门-6.列表渲染全部内容，希望文章能够帮你解决React入门-6.列表渲染所遇到的问题。
		如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。