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;

我在中搜索了一个类似的问题，但没有答案。我不能在那个问题上发表评论。所以我写下这个问题。有人能帮忙吗？谢谢:)

Answer 1

我终于明白了。对于那些有这个问题的人。你应该导入 xterm css style file。如下所示：

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;

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

Xterm.js: How to hide xterm-helper-textarea?

javascript

reactjs

xtermjs