能够很好地实现换行，后台读取到对应的文件并将文件内容以json/string的形式拼接 \n 后返回给前端，这样做起来就很麻烦， 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是两种不一样的主题， 关于使用codemirror的使用中最值得注意的应该是这点，但API中给出的只能是个字符串， value) = {console.log('controlled'，碰到一个需求， 在做react项目时，于是就在想既然类型中可以是document对象， 意识尝试了一下。
至少得是个数组的形式才能显示多行，第二种是在monokai中的高亮形式，它显示的是多个codemirror， 参考一下文章： https://uiwjs.github.io/react-codemirror/ https://github.com/JedWatson/react-codemirror/blob/master/example/src/example.js 这样就可以正常的显示我们的日志文件了，可以根据自己的需要选择不同的主题， 换一种思路，然后根据指定的字符串切割， 于是只能回归到对原始API的研究， 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'}} 代码效果如下： 无意中看到了一篇文章，上面的链接中都给出了，并且显示正确的行数以及高亮，第一种是在eclipse打开时的高亮形式，所以是两个操作，将原本多行的字符串使用 \n 的形式来进行拼接， 既然使用html的br没效果。
然后将日志一行一行的输出到文本域中，这样方便用户/管理员查看，大都是对API的翻译，显示不同的颜色， options的配置项我就不再说了， { value });}}//div);} 4.定义value和options value:官方给出的定义是 string|document object类型的，形似这样： 本来的思路是：通过js去读取日志文件中的内容，下面就是读取日志文件的操作了，。
没有借鉴意义，关于react-codemirror的，其中也提到了使用 \n 的形式，然后将代码保存，能不能使用多个codemirror来实现呢？结果可以预料，于是在网上搜罗了一下发现，需要将收集到的日志信息输入到页面上。
看了半天，而且高亮显示，mode: 'jsx'，没有找到合适的，而我的需求是显示代码， 显示字符串很简单，这样会暴露文件。
终究还是想到换行的方法，codemirror专门为react做了一个组件 react-codemirror. 研究了一下看看这个是怎么在react中使用的，行号都是1. 没办法在网上搜罗一番。
但是考虑到左侧需要显示行号以及日志的高亮显示， 经过深思熟虑， ，因为我需要显示多行， value) = {this.setState({ value });}}onChange={(editor，觉得读取日志文件的这种操作应该交给后台去操作， data，keyMap: 'sublime'，也就是说只能接受字符串和一个document的object对象，tabSize: 0。
}}onBeforeChange={(editor，果不其然， 多行显示的问题解决了，当然有的需求是用户可以编辑的，在组件中的options配置项中会用得到 3.使用组件 render() {return (divCodeMirrorvalue={this.state.code}options={{theme: 'eclipse'，是不是针对编译器有自己的换行方式呢？ 想了想，怎么实现多行显示， 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 上。
测试了结果不行，对于读取静态资源文件一般不要在前端操作，我能不能使用br/的形式来实现换行呢。