在我的反应应用程序中集成 guacamole-common-js答案

【问题标题】：Integrate guacamole-common-js in my react application在我的反应应用程序中集成 guacamole-common-js
【发布时间】：2020-08-26 04:11:45
【问题描述】：

我想在我的 React 应用程序中使用 guacamole-common-js，并且已经通过 guacamole-lite 在 docker 和 guacamole 客户端中设置了 guaca。我已经成功地看到了纯 HTML 和 javascript 的视图。但是，我无法在 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 像 follow 但仍然无法正常工作：


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}/>

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

【问题讨论】：

标签： javascript reactjs guacamole

【解决方案1】：

似乎原因有点愚蠢......鳄梨酱画布渲染的默认样式是{z-index：-1}。加到 1 时，正确渲染。

【讨论】：

【解决方案2】：

正如@Ivana 所说，有必要更改 z-index

const element = guaca.getDisplay().getElement();
const canvas = $(element).find(`canvas`);
for(let c of canvas) {
  $(c).css(`z-index`, 10)
};

【讨论】：