Can we assign a React Component in the innerHTML in the getContent function of G6.menu?

[AChaoZJU]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

As the document says, the getContent function returns HTMLDivElement / string.

Can we use React Component in the getContent function of G6.menu?

Reproduction link

Steps to reproduce

I try to assign a React Component in the innerHTML but it does not work.

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"]
});

Environment	Info
g6	4.3.4
System	macOS 10.15.6
Browser	Chrome 91.0.4472.77

[mxz96102]

getContent is basically only for vanillaJS, If you want to use react try to use React DOM mount component on outDiv instead of return a string

[AChaoZJU]

getContent is basically only for vanillaJS, If you want to use react try to use React DOM mount component on outDiv instead of return a string

Thanks! The solution works well!

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"]
});