Graph is not rendered in cloned container

[sklinov]

Describe the bug

When using G6 inside React component my project requires using wrapper components that can clone it's children elements. So if container for G6 graph is one of those cloned elements (or its child) graph drawing seems to be lost. Not sure if that's a G6 issue or some React stuff.

Your Example Website or App

https://codesandbox.io/s/g6-cloned-container-u20zmx

Steps to Reproduce the Bug or Issue

You can see that in the example provided there' no graph. If you comment out the <Wrapper>...</Wrapper> section to see that graph is now rendered (using another container)

Expected behavior

I'd expect graph to be rendered in the container provided

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 100

Additional context

No response

[Yanyan-Wang]

I think it is because the duplicated DOM id since you assign same id="container" to both div in <GraphContainer />, which is not valid in HTML

[sklinov]

@Yanyan-Wang No, that's not an issue - we can comment out the second one (it's for demonstration purposes only) and in dev tools we can see that only one id=container is present

[Yanyan-Wang]

The GraphContainer in your demo is created multiple times, and the graph is amounted to the first one. Try to make the container unique and stable.

[Yanyan-Wang]

Hi, dear user. Since there was no response for a long time, we cannot figure out the answer of the problem you described. If there is new progress, feel free to open a new issue.