定义数组
const dhList = [{
img: require("../../assets/img/cp1.jpg"), title: '2019年日历航海王台历', introduce: '2019年海贼王限量版精美桌面台历', exchange: '500链币+1元兑换(50本)', time: '截至日期：20190228'
}, {
img: require("../../assets/img/cp1.jpg"), title: '2019年日历航海王台历1', introduce: '2019年海贼王限量版精美桌面台历1', exchange: '500链币+1元兑换(100本)', time: '截至日期：20190228'
}, {
img: require("../../assets/img/cp1.jpg"), title: '2019年日历航海王台历2', introduce: '2019年海贼王限量版精美桌面台历1', exchange: '500链币+1元兑换(50本)', time: '截至日期：20190228'
}]
获取数组并循环
<ul>
{dhList.map((v, index) => {
return (
<li style={{ borderBottom: '1px solid #cdcdcd', marginBottom: '20px', paddingBottom: '15px' }}>
<Row className='download-num' gutter={24}>
<Col span={24} style={{}}>
<div style={{}}>
<Col span={8} style={{ width: '160px' }}><img src={v.img} alt="" style={{ width: '100%', display: 'block' }} /></Col>
<Col span={14}>
<p style={{ marginBottom: '0px', fontSize: '18px', color: '#595959' }}>{v.title}</p>
<p style={{ marginBottom: '0px', color: 'rgba(0, 0, 0, 0.65)' }}>{v.introduce}</p>
<p style={{ marginBottom: '0px', fontSize: '20px', color: '#3698fe' }}>{v.exchange}</p>
<p style={{ marginBottom: '0px', color: 'rgba(0, 0, 0, 0.65)' }}>{v.time}</p>
<p style={{ marginTop: '10px' }}>
<a href="#/setting/exchange-details" style={{ border: '1px solid #cdcdcd', color: 'rgba(0, 0, 0, 0.65)', padding: '5px 15px', borderRadius: '3px', marginRight: '15px' }}>详情</a>
<a href="#/recharge" style={{ border: '1px solid #f4aa14', background: '#f4aa14', color: '#ffffff', padding: '5px 15px', borderRadius: '3px' }}>兑换</a>
</p>
</Col>
</div>
</Col>
</Row>
</li>
)
})}
</ul>
效果图
