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

本文记录了使用React、Modal和codemirror实现日志查看并实时刷新的详细过程，包括在Table中添加查看列、获取日志数据、解决Modal滚动条和遮罩层问题以及在codemirror中展示日志数据的常见问题与解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

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

以下界面展示：

二、解决思路

1、展示界面：Modal

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

2、日志展示：codemirror

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

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

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

1、在Table中添加查看一列

{
     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}中