Question

谷歌地图节点与从DOM中删除的处理效果不佳，以下所有内容都试图解决这个问题。

到目前为止，我已经在我的应用程序中最高级别的React组件中创建了一个地图节点，并且从未卸载它。我正在使用一堆复杂的css来显示/隐藏/定位此节点，具体取决于我所处的路径以及compenentWillReceiveUpdate()生命周期方法中的大量逻辑。我真的希望在普通的已安装/未安装组件中使用Google Map，并将其嵌套在我想要的DOM树中。

我正在玩<div id='my-google-map> <body>节点并将其拉入componentDidMount()中的组件并在卸载时将其放回<body>。这是我目前正在使用的内容。

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>
  )
}

这个似乎很好，重新渲染看起来就像忽略了附加的节点，但这感觉很奇怪，我担心我错过了什么。

将来/将在何时渲染删除附加节点？我应该从false返回shouldComponentUpdate()以防止这种情况发生吗？有没有更好的方法在React中拥有持久的非React节点？

在React组件中追加非React DOM节点？

0 个答案: