Xterm.js：如何隐藏 xterm-helper-textarea？

Question

我尝试在 Reactjs 中使用 Xtermjs。但当我按照指南进行操作时。结果如下：

它应该显示没有顶部文本区域和文本“W”。

我的代码如下：

import React from 'react';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit'; 

class XTerminal extends React.Component {
    componentDidMount() {
        const {id} = this.props;
        const terminalContainer = document.getElementById(id);
        const terminal = new Terminal({cursorBlink: true});
        const fitAddon = new FitAddon();
        terminal.loadAddon(fitAddon);
        terminal.open(terminalContainer);
        terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
        fitAddon.fit();
    }

    render() {
        return(
            <div id={this.props.id}></div>
        )
    }
}

export default XTerminal;

我在stackoverflow中搜索了类似的问题，但没有答案。我无法对这个问题发表评论。所以我写下这个问题。有人可以帮忙吗？谢谢 ：）

Answer 1

最后我得到了这个。对于那些有这个问题的人。你应该导入xterm css 样式文件。像下面这样：

import React from 'react';
import { Terminal } from 'xterm';
import './xterm.css';
import { FitAddon } from 'xterm-addon-fit'; 

class XTerminal extends React.Component {
    componentDidMount() {
        const {id} = this.props;
        const terminalContainer = document.getElementById(id);
        const terminal = new Terminal({cursorBlink: true});
        const fitAddon = new FitAddon();
        terminal.loadAddon(fitAddon);
        terminal.open(terminalContainer);
        terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
        fitAddon.fit();
    }

    render() {
        return(
            <div id={this.props.id}></div>
        )
    }
}

export default XTerminal;