在一个反应​​应用程序内部，我如何动态创建一个元素（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;
  }
}