React利用modal、codemirror实现日志查看并且实时展示功能


一、前言

最近，被分配了一个需求要完成展示日志并且做到实时刷新展示。在此记录一下完成时的思路、遇到的困难以及解决方法

以下界面展示：

二、解决思路

1、展示界面：Modal

点击查看会进行日志展示，以弹窗的形式进行展示

2、日志展示：codemirror

毕竟是展示日志，所以使用代码编辑codemirror

3、实时更新数据：定时器

三、实现过程及遇到问题解决

1、在Table中添加查看一列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
     title: 'XX日志',
     key: 'log',
     dataIndex: 'log',
     render: (text,record) => {
       return (
         <div>
             <a onClick={()=>this.showModal(record)}>查看</a>
             <Modal
                visible={this.state.visible}
                ...  //设置符合自己需求的属性
             >
                {logInfo}
             </Modal>
          </div>
       )
     }
}

首先搭一个展示日志的架子

（1）点击查看（这里将其设置为a标签），点击触发事件onClick，设置visible（为bool类型）的true or false 来控制madal的显示或隐藏

（2）日志的内容写在{logInfo}中

出现问题：

（1）在modal弹出来的时候页面右侧会有两个滚动条

解决方法：在包裹modal的外层div中添加 style={{ overflow: 'hidden'}}

（2）自定义modal来符合自己使用要求（期望自定义右下角按钮以及不想要右上角的关闭小叉叉×）

解决方法：

去查看了官方文档，有一些实例和属性介绍还算比较全

① 通过设置 footer={[...]} 属性来实现自定义右下角按钮

以下是官方文档描述：

不太详细，但是有实例，可以去看一下代码。也可以搜索一下footer的用法。

其实挺简单的，就和平常定义