I want to use window.open() api and ReactDOM.createPortal() api to pass the Flexmonster component to the created new window,however,it will prompt TypeError: f.container.substr is not a function and TypeError: Cannot read property ‘dispose’ of undefined.
Here is my scenario:
1.There is a existing flexmonster pivot table.
2.Select some cells in the pivot table and right-click to open a new flexmonster instance in a new window,in my case I was using window.open() api and ReactDOM.createPortal() api to do this,but failed.
Since my project is a react-based project and it seems the ReactDOM.createPortal() is the much appropriate api to achieve such goal.
So,is there a better way to open another Flexmonster instance and show the selected cells data on it?Or can I solve that two error when using ReactDOM.createPortal() api,thanks!
The demo code and errors.png are attached for your reference.
Thank you for reaching out to us.
You are right, it seems using
ReactDOM.createPortal() is the suggested approach when it comes to rendering React components in a new window.
We have prepared a simple React project for illustration purposes (please see
"pivot-react.zip" in the attachments).
In the example, a new “Open in new pivot” option is added to Flexmonster’s context menu for opening a new Flexmonster instance in a new window.
Please note that this example only illustrates the general idea of how Flexmonster could be rendered in a new window in React.
To start the sample project, please run the following commands:
Hope this helps!
Please feel free to reach out if other questions arise.
Thanks for the assistant and we’ll try your suggestion!