Компонент как всплывающее содержимое

Я создаю 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 во всплывающее окно в качестве содержимого?


reactjs javascript mapbox mapbox-gl-js
person Stophface    schedule 22.08.2019    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Если возможно, я бы использовал оболочку React для mapbox-gl. В соответствии с всплывающие документы вы можете добавьте любой компонент 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);

Надеюсь, это должно помочь.

person Adam Kosmala    schedule 22.08.2019

arrow_upward
-1
arrow_downward

Если вам нужно поддерживать функциональность onClicks и других не-HTML аспектов компонента, который вы надеетесь отобразить, предложение Адама позволит это, по сравнению с некоторыми другими сообщениями, предлагающими использование ReactDOMServer.renderToString(), который выводит только HTML .

person Ryan Buckley    schedule 03.01.2021