作为弹出内容的组件

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

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

Answer 1

如果可能的话，我会选择React wrapper for mapbox-gl. According to the popup docs you can add any React component as Popup child. Otherwise the answer to your question would be this post，我相信

编辑：

你也可以这样做：

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

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

Answer 2

如果您需要维护 onClicks 的功能以及您希望呈现的组件的其他非 HTML 方面，Adam 的建议将允许这样做，而其他一些帖子则建议使用 ReactDOMServer.renderToString()，它只输出 HTML.

作为弹出内容的组件

Component as Pop up Content

javascript

mapbox

reactjs

mapbox-gl-js