在我的react应用程序中集成鳄梨酱公共js

Question

我想在我的React应用程序中使用鳄梨酱公共js，并且已经通过鳄梨酱lite在docker和鳄梨酱客户端中设置了鳄梨酱。我已经成功地从纯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}/>

我是新手，任何帮助都将不胜感激。

Answer 1

似乎原因有点愚蠢。。。鳄梨酱画布渲染的默认样式是{z-index:-1}。当加起来为1时，它将正确渲染。

Answer 2

如@Ivana所述，需要更改z索引

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