Xterm. js: Как скрыть xterm-helper-textarea? - PullRequest
Новая
       23

Xterm. js: Как скрыть xterm-helper-textarea?

0 голосов
/ 12 февраля 2020

Я пытаюсь использовать Xterm js в Reactjs. но когда я следую за гидом. результат отображается следующим образом:

enter image description here

Должен отображаться без верхней текстовой области и текста '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 без ответа. и я не могу комментировать этот вопрос. Поэтому я пишу этот вопрос. Может ли кто-нибудь помочь? спасибо:)

1 Ответ

1 голос
/ 12 февраля 2020

Наконец я получил это. Для тех, у кого есть эта проблема. Вы должны импортировать 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;
...