DHTMLX Layout with React

I try to use the Layout with React and somehow got it working but to mee it feels like this is not a great solution.
Can someone explain how we are supposed to use things like the layout (or tabbar) with react?
In the react/component world i would expect to be able to define someting like:


Now what i did was i created a react component for the Layout (with react hooks) that has some rows:

              id: 'content',
              css: '',
              html: '<div id="content">content</div>',
              id: 'content2',
              css: '',
              html: '<div id="content2">content2</div>',

and use ReactDOM.render to render my components:


  <Provider store={store}>

    <Gantt />




But this way i have nested ReactDOM.render calls, which seems to be a bad thing…

Any suggestions to this?

I had a similar problem, the suggestion was to create a layout component and to use the attach() method to add dhx widgets to the layout cells (as you would in regular js), the problem then is that the layout + any attached widgets all reside within one react component.
I never found a workable solution and instead I have explored using the widgets without the dhx layout. In case you haven’t seen the react examples, they are here:

1 Like

I ended up doing the same, i just dropped the layout component. Having all DHX in one component is not a road i would take…

Seems like there is room for improvement here.