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