Javascript 是否在React组件中附加非React DOM节点？

GoogleMap节点不能很好地处理从DOM中删除的问题，接下来的一切都在试图解决这个问题

到目前为止，我已经在我的应用程序的最高级别的React组件中创建了一个映射节点，并且从未卸载过它。我使用了一堆复杂的css来显示/隐藏/定位这个节点，基于我所处的路线，并且在

componentwillreceiveupdate（）生命周期方法中使用了大量逻辑。我真的很想在普通的挂载/卸载组件中使用谷歌地图，并将其嵌套在我想要的DOM树中

我正在玩放置
的游戏。你试过使用
反应谷歌地图吗？它在相当高级的用例中工作得非常好。如果它不适合您的需要，也许您可以分享更多关于您的用例的信息？@VonD，当组件卸载时，您如何处理Google Map节点？我在这里没有看到任何东西，但可能我在错误的文件中。您是对的，当卸载组件时，DOM节点被删除，这可能会导致内存泄漏，而我没有意识到这一点。此问题在此处跟踪：。话虽如此，我已经在一个应用程序中使用了它，每次路线改变时，都会安装/卸载带有大量标记和侦听器的地图，没有任何问题。你需要把地图放在附近吗？如果您不这样做，并且这样做只是为了解决内存泄漏问题，我认为最好的做法是清除所有侦听器/将映射设置为
null
/等等。在
componentWillUnmount
@VonD上，我不需要出于任何其他原因保留DOM节点，只需要担心内存泄漏。：）我将尝试删除侦听器，并将map设置为
null
，然后查看情况。您是否尝试过使用
react google maps
？它在相当高级的用例中工作得非常好。如果它不适合您的需要，也许您可以分享更多关于您的用例的信息？@VonD，当组件卸载时，您如何处理Google Map节点？我在这里没有看到任何东西，但可能我在错误的文件中。您是对的，当卸载组件时，DOM节点被删除，这可能会导致内存泄漏，而我没有意识到这一点。此问题在此处跟踪：。话虽如此，我已经在一个应用程序中使用了它，每次路线改变时，都会安装/卸载带有大量标记和侦听器的地图，没有任何问题。你需要把地图放在附近吗？如果您不这样做，并且这样做只是为了解决内存泄漏问题，我认为最好的做法是清除所有侦听器/将映射设置为
null
/等等。在
componentWillUnmount
@VonD上，我不需要出于任何其他原因保留DOM节点，只需要担心内存泄漏。：）我将尝试删除侦听器，并将map设置为
null
，然后看看情况如何。
componentDidMount: function () {
  const { mapWrapper } = this.refs
  let mapNode = document.getElementById('my-google-map')

  if (!mapNode) {
    mapNode = document.createElement('div')
    mapNode.setAttribute('id', 'my-google-map')
  }

  mapWrapper.appendChild(mapNode)

  this.setState({
    mapNode: mapNode
  })
},

componentWillUnmount: function () {
  document.body.appendChild(this.state.mapNode)
},

render: function () {
  return (
    <div ref='mapWrapper'>
      <span>{this.props.currentDropdown}</span>
    </div>
  )
}