我们使用了 Electron 研发了烧录工具，需要显示运行日志，所以我们选择了 XTerm 来显示输出日志。
安装如下:
npm install xterm-for-react
调用如下：
import React, { useEffect, useState, useRef } from 'react';
import { XTerm } from 'xterm-for-react';
function App(props) {
const xtermRef = React.useRef(null);
return (
<div className="main">
<XTerm ref={xtermRef} />
</div>
);
}
我们通过 xtermRef.current.terminal.write 来输出执行日志。
但是输出的时候乱套了，该换行的地方没有换行。
换行需要通过 xtermRef.current.terminal.writeln 才能换行，
所以我们要对输出的结果进行处理，如下：
function writeLog(line) {
while (line) {
const index = line.indexOf('\n');
if (index > -1) {
xtermRef.current.terminal.writeln(line.substring(0, index));
line = line.substring(index + 1);
} else {
xtermRef.current.terminal.write(line);
line = '';
}
}
}
输出的问题我们解决了，但是XTerm没有跟着外框的变化而变化，我们需要XTerm可以自适应，有一个 xterm-addon-fit 可以解决这个问题。
安装如下：
npm install xterm-addon-fit
使用如下：
import { FitAddon } from 'xterm-addon-fit';
const fitAddon = new FitAddon();
function App(props) {
const xtermRef = React.useRef(null);
useEffect(() => {
fitAddon.fit();
}, [])
return (
<div className="main">
<XTerm ref={xtermRef} addons={[fitAddon]} />
</div>
);
}
Screenshot 2021-06-03 at 11.26.14 PM.png
