react-codemirror实现log日志文件的输出

在做react项目时，碰到一个需求，需要将收集到的日志信息输入到页面上，而且高亮显示，这样方便用户/管理员查看。形似这样：

本来的思路是：通过js去读取日志文件中的内容，然后将日志一行一行的输出到文本域中，然后根据指定的字符串切割，显示不同的颜色，但是考虑到左侧需要显示行号以及日志的高亮显示，这样做起来就很麻烦。于是在网上搜罗了一下发现，codemirror专门为react做了一个组件react-codemirror.

研究了一下看看这个是怎么在react中使用的，怎么实现多行显示。

1.安装

npm install @uiw/react-codemirror --save

2.在js中引入

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/eclipse.css';
import 'codemirror/theme/monokai.css';

其中eclipse.css和monokai.css是两种不一样的主题，第一种是在eclipse打开时的高亮形式，第二种是在monokai中的高亮形式，在组件中的options配置项中会用得到

3.使用组件

render() {
        return (
            <div>
                <CodeMirror
                    value={this.state.code}
                    options={{
                        theme: 'eclipse',
                        tabSize: 0,
                        keyMap: 'sublime',
                        mode: 'jsx',
                    }}
                    onBeforeChange={(editor, data, value) => {
                        this.setState({ value });
                    }}
                    onChange={(editor, value) => {
                        console.log('controlled', { value });
                    }}
                />
            </div>
        );
    }

4.定义value和options

value:官方给出的定义是 string|document object类型的。也就是说只能接受字符串和一个document的object对象。

          显示字符串很简单。

constructor(props) {
        super(props);
        this.state = {
            code: 'Oct 23 2019 17:06:35.664| [Radius Auth Proxy Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt'
        }
    }

效果也是如图显示：

但这样不符合我的需求，因为我需要显示多行，至少得是个数组的形式才能显示多行。但API中给出的只能是个字符串，于是就在想既然类型中可以是document对象，我能不能使用<br/>的形式来实现换行呢。测试了结果不行。

换一种思路，能不能使用多个codemirror来实现呢？结果可以预料，它显示的是多个codemirror，行号都是1.

没办法在网上搜罗一番，没有找到合适的，大都是对API的翻译，没有借鉴意义。

于是只能回归到对原始API的研究。

看了半天，终究还是想到换行的方法。

既然使用html的br没效果，是不是针对编译器有自己的换行方式呢？

想了想，最后定位在\n上。

意识尝试了一下，将原本多行的字符串使用\n的形式来进行拼接，果不其然，能够很好地实现换行，并且显示正确的行数以及高亮。

constructor(props) {
        super(props);
        this.state = {
            code: 'Oct 23 2019 17:06:35.664| [Radius Auth Proxy Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.665| [Radius Auth Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.664| [Radius Acct Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.737| [Radius Auth Proxy Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Auth Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Acct Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Auth Proxy Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Auth Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Acct Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt\n'+
            'Oct 23 2019 17:06:35.738| [Radius Auth Proxy Listener] [INFO ] org.tinyradius.util.RadiusServer [APPID:UPAM] thread interrupted...reinterrupt'
        }
    }

代码效果如下：

无意中看到了一篇文章，关于react-codemirror的，其中也提到了使用\n的形式。

参考一下文章：

https://uiwjs.github.io/react-codemirror/

https://github.com/JedWatson/react-codemirror/blob/master/example/src/example.js

这样就可以正常的显示我们的日志文件了。

多行显示的问题解决了，下面就是读取日志文件的操作了。

经过深思熟虑，觉得读取日志文件的这种操作应该交给后台去操作。对于读取静态资源文件一般不要在前端操作，这样会暴露文件。后台读取到对应的文件并将文件内容以json/string的形式拼接\n后返回给前端。

options的配置项我就不再说了，上面的链接中都给出了，可以根据自己的需要选择不同的主题。

关于使用codemirror的使用中最值得注意的应该是这点。当然有的需求是用户可以编辑的，然后将代码保存。而我的需求是显示代码，所以是两个操作。