javascript - 在我的 React 应用程序中集成 guacamole-common-js

Question

我想在我的 React 应用程序中使用 guacamole-common-js，并且已经通过 guacamole-lite 在 docker 和 guacamole 客户端中设置了 guaca。我已经成功地从纯 HTML 和 javascript 中看到了 View 。但是，我无法在 React JSX 中呈现它。这是我的代码:

import Guacamole from "guacamole-common-js";

let guaca = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
guaca.onerror = function (error) {
    alert(error);
};
guaca.connect();

// Disconnect on close
window.onunload = function () {
     guaca.disconnect();
}

let display = document.getElementById("display");
display.appendChild(guaca.getDisplay().getElement());

并渲染它:

React.createElement("div", {id, "display"})

我也尝试使用 Ref，但仍然无法正常工作:

constructor(props) {
    super(props);
    this.displayRef = React.createRef();
    this.guacaRef = React.createRef();
}


this.guacaRef.current = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
this.guacaRef.current.onerror = function (error) {
    alert(error);
};
this.guacaRef.current.connect();

// Disconnect on close
window.onunload = function () {
    this.guacaRef.current.disconnect();
}

this.displayRef.current.appendChild(this.guacaRef.current.getDisplay().getElement());

渲染它:

 <div ref={displayRef}/>

我是新手，如有任何帮助，我们将不胜感激。

Answer 1

似乎原因有点愚蠢...... Guacamole Canvas 渲染的默认样式是{z-index:-1}。当加起来为 1 时，它会正确呈现。