组件作为弹出内容

Question

我正在创建一个 Pop up

  this.popUp = new mapboxgl.Popup({
    closeButton: true,
    closeOnClick: true,
    anchor: 'bottom-left',
  })
    .setLngLat(coordinates)
    .setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )
    .addTo(this.map);

的内容Pop up我定义以下

.setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )

有没有办法将 aReact.Component或 afunctional Component作为内容传递给弹出窗口？

Answer 1

如果可能，我会为 mapbox-gl使用React 包装器。根据弹出文档，您可以将任何 React 组件添加为Popup子组件。否则你的问题的答案就是这篇文章，我相信

编辑：

你也可以这样做：

const placeholder = document.createElement('div');
ReactDOM.render(el, placeholder);

new mapboxgl.Popup({
  closeButton: true,
  closeOnClick: true,
  anchor: 'bottom-left',
})
.setLngLat(coordinates)
.setDOMContent(placeholder)
.addTo(this.map);

这应该可以解决问题，希望如此。