在React应用程序内部，如何动态创建一个element（div）并在其中渲染一个React应用程序？

Question

I am building a chat application using react-redux. This chat application will take multiple interactions at a time and user can switch between them.

class Chat extends React.Component  {
 render() {
    return(
         //children components
    )

  }
}
ReactDom.render(<Chat/>,document.getElementById('app'))

I have a survey form component as a child component of the app. survey form is loaded inside an iframe and the contents of the form are loaded from server which are different for different interactions. So whenever a new interaction comes to user I re-render survey form component the whole thing with the new form data ( list of iframes in this case one for each interaction) .

Now the problem is that it will render the initial form contents every time, let's say I have filled the first form and when a new interaction comes up (state change :rerender with the list) there will be 2 forms with initial content received from the server making me lose the data which I have filled.

Question : How can I retain this filled contents?

A probable solution would be storing the current form contents in a redux-store with the key as interaction and rendering it for the particular interaction, when the iframe unloads but I do not want to do that.

Is there anyway where I can dynamically (on new interaction ) create a new div or any element and render the surveyformcomponent (containing single iframe) again so that other components are not re-rendered. So that there will be new iframe rendered inside a div without affecting the previously rendered iframes.

Thanks!!

Answer 1

Its a stretch but you probably do another ReactDOM render call inside the componentDidMount lifecycle method of your parent class. You could also us the lifecycle method shouldComponentUpdate to gain more control over the rerendering.

shouldCompnentUpdate(nextProps, nextState) {
  if (/*something changed and you need to rerender explicitly*/) {
     return true;
  } else {
    return false;
  }
}