如何“保存和恢复”xterm.js 实例的上下文？

Question

在我的电子应用程序中，我有一个

xterm.js

终端模拟器，位于我的

react tabs

之一。如何保留该终端的状态，以便在使用时退出和返回时文本、光标位置等仍然存在？ React 中通常的方法是使用状态变量，在父组件中设置它并将其传递给渲染器上的子组件，但由于 xterm.js 本身不是一个 React 组件，所以现在我不知道该怎么做。

目前我创建的终端是这样的：

import { useEffect, useRef, useState } from "react";
import { Terminal as TerminalType } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
//import { SearchAddon } from 'xterm-addon-search'
import 'xterm/css/xterm.css';

export const Terminal = () => {

  const [terminal] = useState(new TerminalType({
                              cursorBlink: true,
                              cursorStyle: window.api.isWindows ? "bar" : "underline"
                      }));
  useEffect(() => {
    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);
    
    window.api.receive('terminal.incomingData', (data) => {
      terminal.write(data);
    });
    
    terminal.open(document.getElementById('xterm-container') as HTMLElement);
    terminal.onData((key) => {
      window.api.send('terminal.keystroke', key);
    });
    fitAddon.fit();
    // simulate enter press to show the initial prompt command
    window.api.send('terminal.keystroke', '\r');
  }, [terminal]);

  return (
    <div id="xterm-container"></div>
  )
}

更新1： 使用

forceRender={true}

制作选项卡确实有效：

<TabPanel key="3" forceRender={true}>
  <Terminal />
</TabPanel>

但它始终保持渲染安装状态，而不仅仅是在需要时（即选项卡处于活动状态时）。欢迎使用更好的方法来解决这个问题。 另外，我发现了一个问题，当设置

fitAddon.fit()

时，

forceRender={true}

不起作用。

Answer 1

您可以使用 xterm 插件

@xterm/addon-serialize

来保存终端缓冲区或其中的一部分。它将被序列化为一个字符串，您可以传递给 write() 以恢复状态。好像没有保存命令历史记录。