这篇文章主要总结一下,页面的使用方法,里面包括了页面的样式用法,页面的循环的不同方法,这个是在实际工作用的特别多的地方,希望对你们有帮助,记得关注收藏,谢谢
页面样式切换
这里要说明一下,这个className只能用一个类样式名,不能添加多,所以一般切换样式都是三元运算
<div className={device.base.status == "1" ? styles.InformationDivRightOneSpanOnealarm:styles.InformationDivRightOneHeader}>
判断某一块内容显示隐藏
解释下面的意思,前面是判断条件,如果条件成立就显示后面的内容,反之隐藏内容
{item.name=='数据可视化' &&(<img style={{width:20,height:20,marginRight:15,position:'relative',top:4}} src={ico1}></img>)}
多内容的情况
{device.type == 'xf_yyht' && (
<>
<div className={styles.InformationDivRightOneBasic12}>
<span>类  型: </span>点型一氧化碳探测器
</div>
<div className={styles.InformationDivRightOneBasic12}>
<span>规  格: </span>一氧化碳探测型
</div>
</>
)}
三元运算显示页面
{
disposeData.alarm == 'P'?
<Button type="primary" size="large" onClick={()=>{IsAlarm('C')}}>撤防</Button>:
<Button type="primary" warning size="large" onClick={()=>{IsAlarm('P')}}>布防</Button>
}
页面循环显示
在页面通过Object.keys方法循环
{Object.keys(MaintenancetableData.data.list).map(lang => (
<>
<div className={styles.InformationDivRightTwoCheck}>
{MaintenancetableData.data.list[lang].createtype==0?'生成':'手动'}
</div>
</>
))}
定义一个函数,然后在页面上调用
const renderCards = () =>
tableData.list.map((c, i) => (
<div className={styles.ViewItem} key={i} onClick={()=>changeTagListStatus(c)}>
<div className={styles.title}>{c.name}</div>
{c.offline && (<div className={styles.content_off}>离线</div>)}
</div>
));
<div>
{renderCards()}
</div>