react 遍历生成不同区块下的内容

// 存储变量

@observable detail= {};

// 请求接口

@action

async searchD(sysId, obj) {

this.statisticLoading = true;      // loading 以防异步加载渲染时数据还没取到

try {

    const res = await ApiService.searchDtail(obj);

   runInAction(() => {

      if (res && res.size > 0) {

        this.detail[sysId] = res.list;   // 防止点击其他模块时内容被篡改

    }

   this.statisticLoading = false;

});

} catch (error) {

  this.statisticLoading = false；

  console.log(error);

}

}

// 渲染

expandContent = record => {

const { detail} = this.store;

return (

<div>

{detail!== '' && detail[record.sysId] !== undefined    // 根据不同ID渲染

&& detail[record.sysId].length > 0 ?

detail[record.sysId].map((item) => {

return (

<Row key={record.sysId}>

<Col span={4}>{item.createDate}</Col>

{

item.alarmLevel === '1' &&

<Col span={4}>

<div className={cx('icon')} style={{ backgroundColor: '#F5222D' }} />

致命

</Col>

}

{

item.alarmLevel === '2' &&

<Col span={4}>

<div className={cx('icon')} style={{ backgroundColor: '#FAAD14' }} />

严重</Col>

}

{

item.alarmLevel === '3' &&

<Col span={4}>

<div className={cx('icon')} style={{ backgroundColor: '#F8E71C' }} />

一般</Col>

}

<Col span={14}>{item.alarmTitle}</Col>

<Col span={2}>

     ......

</Col>

</Row>

);

})

: ''}

</div>

);

}