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样式文件。如下所示：

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;