在render()中循环数据,根据数据不同展示标签不同
import React from 'react';
const quanList=[
{
id:1,
buy_price:1,//购买券的价格
quan_price:30,//可抵扣价格
quanName:'仅限(学习机)商品使用',
on_time:'2020-11-01',
off_time:'2020-11-30',
isHave:false,
},
{
id:2,
buy_price:3,//购买券的价格
quan_price:30,//可抵扣价格
quanName:'通用券',
on_time:'2020-11-01',
off_time:'2020-11-30',
isHave:true,
},
];
export default class QuanList extends React.Component{
constructor(props){
super(props);
this.state={
data:quanList,
}
}
render(){
return(
<div className="mui-content">
<div style={{marginTop:'12px'}}>
{this.state.data.map(quan=>(
<div className='ling_ticket2' key={quan.id}>
<div className='cont'>
<div className='numbers'>¥<span className='num'>{quan.buy_price}</span>(可抵扣{quan.quan_price}元)</div>
<div className='manjian'>{quan.quanName}</div>
<div className='manjian'>{quan.on_time} 至 {quan.off_time}</div>
</div>
<div className='state'>
{quan.isHave ? <div style={{paddingTop:'18px'}}>已<br/>领<br/>完</div> : <a href="lingqu(id)" key='lingqu_id' style={{color:'#fff'}}>立<br/>即<br/>领<br/>取</a>}
{/* <div style={{paddingTop:'18px'}}>已<br/>领<br/>完</div> */}
{/* <a href="lingqu(id)" key='lingqu_id' style={{color:'#fff'}}>立<br/>即<br/>领<br/>取</a> */}
</div>
</div>
))}
</div>
</div>
)
}
}