React基础教程（08）：state体验
import React, {Component} from 'react';
import BetterScroll from 'better-scroll';
import {Button, List, Avatar} from 'antd';
import './css/'
export default class App extends Component {
state = {
list: []
}
render() {
return(
<div style={{padding:'10px'}}>
<Button style={{marginBottom:'5px'}} type={"primary"} onClick={()=>this.getData()}>获取数据</Button>
<div className={"wrapper"} style={{height:'200px',width:'800px', overflow:"hidden", border:'1px solid grey'}}>
<List
itemLayout="horizontal"
dataSource={this.state.list}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a href="">{item.player}</a>}
description={item.comment}
/>
</List.Item>
)}
/>
</div>
</div>
)
}
getData(){
const list = [
{
player: '杜兰特',
comment: '四连冠',
avatar: '/media/img/players/head/260x190/'
},
{
player: '詹姆斯',
comment: '3个冠军',
avatar: '/media/img/players/head/260x190/'
},
{
player: '库里',
comment: '晚安，巴黎',
avatar: '/media/img/players/head/260x190/'
},
{
player: '布克',
comment: '脏活累活都给我',
avatar: '/media/img/players/head/260x190/'
},
{
player: '哈利伯顿',
comment: '作业一点没写，也得了个A',
avatar: '/media/img/players/head/260x190/'
},
{
player: '塔图姆',
comment: '我是NBA冠军啊',
avatar: '/media/img/players/head/260x190/'
},
{
player: '爱德华兹',
comment: '现在是队友了KD',
avatar: '/media/img/players/head/260x190/'
},
{
player: '戴维斯',
comment: '我也很强',
avatar: '/media/img/players/head/260x190/'
},
{
player: '阿德巴约',
comment: '1连冠',
avatar: '/media/img/players/head/260x190/'
},
{
player: '怀特',
comment: '1连冠',
avatar: '/media/img/players/head/260x190/'
},
];
this.setState({
list: list
},()=>{
new BetterScroll(".wrapper")
})
}
}