本教程總共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

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裡渲染!

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是不會重複的!

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

這段程式碼還可以再優化:

繼續優化:

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

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;

本文完 

禁止擅自轉載,如需轉載請在公眾號中留言聯絡我們!

感謝童鞋們支援!

如果你有什麼問題,可以在下方留言給我們!