全网react+飞冰（ice）UI框架组件实例（8）页面运用

这篇文章主要总结一下，页面的使用方法，里面包括了页面的样式用法，页面的循环的不同方法，这个是在实际工作用的特别多的地方，希望对你们有帮助，记得关注收藏，谢谢

页面样式切换

这里要说明一下，这个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>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&thinsp;型: </span>点型一氧化碳探测器
      </div>
      <div className={styles.InformationDivRightOneBasic12}>
        <span>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&thinsp;格: </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>
复制代码