MapBox 无法在标记弹出窗口上添加反应组件答案

【问题标题】：MapBox can't add react component on markers popupMapBox 无法在标记弹出窗口上添加反应组件
【发布时间】：2020-11-03 15:51:10
【问题描述】：

我一直在从事一个房地产项目，但一直坚持在标记弹出窗口中添加反应组件。下图显示了弹出窗口的示例： Popup example

这是我尝试在标记上添加弹出窗口的代码：

var card = <Card />
var popup = new mapboxgl.Popup({ offset: 25 })
.setDOMContent(ReactDOM.render(card, document.getElementById('map')))

var marker = new mapboxgl.Marker(el)
.setLngLat(coordinates)
.setPopup(popup)
.addTo(map);
setMarkers(markers => [...markers, marker])

我不断收到同样的错误：

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

请帮帮我！

【问题讨论】：

没有人使用过 MapBox 地图并遇到过同样的问题吗？我只想在标记弹出窗口中添加一个组件，但 mapbox 只接受 html DOM 元素。有没有办法渲染组件而不是 DOM 元素？

标签： reactjs popup components mapbox marker

【解决方案1】：

setDOMContent 的预期参数类型为Node，但ReactDOM.render 的返回类型为Component。
https://reactjs.org/docs/react-dom.html#render
https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup#setdomcontent

在 React 中，使用 React.useRef 和 .current 来引用 dom 内容。
https://reactjs.org/docs/hooks-reference.html#useref

const popupRef = React.useRef(null);
const popup = new mapboxgl.Popup({ offset: 25 })
  .setDOMContent(popupRef.current);

return (
  <>
    <div id="map"></div>
    <div ref={popupRef}>popup</div>
  </>
);

【讨论】：