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

Question

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

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

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

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

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

问题：我怎样才能保留这个填充的内容？

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

无论如何，我是否可以动态地（在新交互中）创建一个新的 div 或任何元素并再次渲染surveyformcomponent（包含单个 iframe），这样其他组件就不会重新渲染。这样在 div 内就会有新的 iframe 渲染，而不会影响之前渲染的 iframe。

谢谢！！

Answer 1

这是一个延伸，但您可能会在父类的 componentDidMount 生命周期方法中执行另一个 ReactDOM 渲染调用。你也可以使用生命周期方法shouldComponentUpdate 来获得对重新渲染的更多控制。

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