我们使用了 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