En mi aplicación electrónica, tengo un emulador de terminal xterm.js , en una de mis react tabs . ¿Cómo conservo el estado de este terminal para que cuando el uso salga y retroceda, el texto, la posición del cursor, etc. aún estén allí? el enfoque habitual en reaccionar es simplemente usar variables de estado, configurarlo en el componente principal y pasarlo al niño en el renderizador, pero dado que xterm.js no es un componente de reacción en sí mismo, ahora no tengo idea de cómo hacerlo.

actualmente creo la terminal así:

 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> ) }

ACTUALIZACIÓN 1: Hacer la pestaña con forceRender={true} funciona:

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

Pero mantiene el renderizado montado todo el tiempo, no solo cuando se necesita, es decir, la pestaña está activa. Mejores formas de resolver esto son bienvenidas. Además, encontré un problema fitAddon.fit() no funciona cuando se forceRender={true} .