首页 > 解决方案 > 我们可以在 G6.menu 的 getContent 函数中使用 React Component 吗?

问题描述

文档所述, getContent 函数返回HTMLDivElement / string.

我们可以在 G6.menu 的 getContent 函数中使用 React Component 吗?

转载链接

在 CodeSandbox 上编辑

重现步骤

我尝试在 innerHTML 中分配一个 React 组件,但它不起作用。 在此处输入图像描述

const contextMenu = new G6.Menu({
    getContent(evt) {
    const outDiv = document.createElement("div");
    outDiv.style.width = "180px";
    outDiv.innerHTML = `<Menu />`;
    return outDiv;
  },
  handleMenuClick: (target, item) => {
    console.log(target, item);
  },
  // offsetX and offsetY include the padding of the parent container
  offsetX: 16 + 10,
  offsetY: 0,
  itemTypes: ["node", "edge", "canvas"]
});
环境 信息
g6 4.3.4
系统 macOS 10.15.6
浏览器 铬 91.0.4472.77

标签: reactjsantv

解决方案


const contextMenu = new G6.Menu({
    getContent(evt) {
    const outDiv = document.createElement("div");
    ReactDOM.render(<Menu />, outDiv)
    return outDiv;
  },
  handleMenuClick: (target, item) => {
    console.log(target, item);
  },
  // offsetX and offsetY include the padding of the parent container
  offsetX: 16 + 10,
  offsetY: 0,
  itemTypes: ["node", "edge", "canvas"]
});

推荐阅读