DHTMLX Layout with React

Suite and Optimus Suite 6
#1

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:

<Layout/>
  <LayoutCell>
   <Gantt/>
  </LayoutCell>
</Layout>

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:

ReactDOM.render(

  <Provider store={store}>

    <Gantt />

  </Provider>

  document.getElementById('content')

);

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

Any suggestions to this?

#2

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:
https://github.com/DHTMLX/react-widgets/tree/master/src

1 Like
#3

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.