前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React技巧3(如何优雅的渲染一个List)

React技巧3(如何优雅的渲染一个List)

作者头像
前端人人
发布2018-04-11 17:12:35
1.3K0
发布2018-04-11 17:12:35
举报
文章被收录于专栏:前端人人

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04

2.React 技巧2(避免无意义的父节点)----2018.01.05

3.React 技巧3(如何优雅的渲染一个List)----2018.01.06

4.React 技巧4(如何处理List里面的Item)----2018.01.07

5.React 技巧5(TodoList实现)----2018.01.08

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

渲染list是经常遇到的开发需求,从后台来到一个list数据,我们要给他再前端展示出来!

我们先手动造一个list数据

修改 app -> component -> shop -> Index.jsx

代码语言:javascript
复制
import React from 'react';
import '../../public/css/shop.pcss'

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {id: 1, title: '前端人人1'},
                {id: 2, title: '前端人人2'},
                {id: 3, title: '前端人人3'},
                {id: 4, title: '前端人人4'},
                {id: 5, title: '前端人人5'},
                {id: 6, title: '前端人人6'},
                {id: 7, title: '前端人人7'},
                {id: 8, title: '前端人人8'},
                {id: 9, title: '前端人人9'}
            ]
        };
    }

    render() {
        return (
            <div className="content">

            </div>
        );
    }
}

export default Index;

我们在render里渲染!

代码语言:javascript
复制
render() {
    return (
        <div className="content">
            {
                this.state.list.map((data,index) => {
                    return (
                        <li key={index}>{data.title}</li>
                    )
                })
            }
        </div>
    );
}

我们看下浏览器

在这里需要注意的是,key最好不要用index

我们改造下:

我们把 index 改成 data.id,一般id是不会重复的!

代码语言:javascript
复制
render() {
    return (
        <div className="content">
            {
                this.state.list.map((data) => {
                    return (
                        <li key={data.id}>{data.title}</li>
                    )
                })
            }
        </div>
    );
}

这段代码还可以再优化:

继续优化:

代码语言:javascript
复制
render() {
    let {list} = this.state;
    return (
        <div className="content">
            {
                list.map(data => <li key={data.id}>{data.title}</li>)
            }
        </div>
    );
}
代码语言:javascript
复制
import React from 'react';
import '../../public/css/shop.pcss'

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {id: 1, title: '前端人人1'},
                {id: 2, title: '前端人人2'},
                {id: 3, title: '前端人人3'},
                {id: 4, title: '前端人人4'},
                {id: 5, title: '前端人人5'},
                {id: 6, title: '前端人人6'},
                {id: 7, title: '前端人人7'},
                {id: 8, title: '前端人人8'},
                {id: 9, title: '前端人人9'}
            ]
        };
    }

    render() {
        let {list} = this.state;
        return (
            <div className="content">
                {
                    list.map(data => <li key={data.id}>{data.title}</li>)
                }
            </div>
        );
    }
}

export default Index;
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端人人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档