Javascript 在react应用程序中，如何动态创建元素（div）并在其中呈现react应用程序？

我正在使用react redux构建聊天应用程序。此聊天应用程序将一次进行多个交互，用户可以在它们之间切换

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

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

类聊天扩展React.Component{
render（）{
返回(
//子组件
)
}
}
ReactDom.render（，document.getElementById（'app'））

我有一个调查表单组件作为应用程序的子组件。 调查表单加载在iframe中，表单的内容从服务器加载，对于不同的交互，服务器是不同的。因此，每当一个新的交互出现在用户面前时，我都会用新的表单数据（在本例中，iFrame的列表，每个交互一个）重新呈现调查表单组件

现在的问题是，它每次都会呈现初始表单内容，假设我已经填写了第一个表单，当出现新的交互时（状态更改：重新提交列表），将有两个表单从服务器接收到初始内容，使我丢失已填写的数据

问题：如何保留已填写的内容

一个可能的解决方案是将当前表单内容存储在redux存储区中，并使用键作为交互，并在iframe卸载时为特定交互呈现它，但我不想这样做

是否存在我可以动态（在新交互时）创建新div或任何元素并再次渲染surveyformcomponent（包含单个iframe）的地方，以便不重新渲染其他组件。这样，将在div内渲染新的iframe，而不会影响以前渲染的iframe

---

谢谢

这是一个延伸，但您可能在父类的componentDidMount生命周期方法中执行另一个ReactDOM呈现调用。您还可以使用生命周期方法

shouldComponentUpdate

，以获得对重新招标的更多控制

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

---

谢谢@Stephen L！！如果我理解正确，Inside SurveyComponent类u通过创建新id再次渲染Inside SurveyComponent Inside ShouldComponentUpdate。//看起来很难看` ShouldComponentUpdate（nextProps，nextState）{如果（/*某些内容发生了更改，您需要显式重新提交*/）{document.createElement（'div'））//分配一些唯一的id，如app_1；ReactDom.render（，newlyCreatedDivId）}return false；//always return false}`我不理解ComponentDidMount在这种情况下的用法！！