MapBox无法在标记弹出窗口上添加react组件 [英] MapBox can't add react component on markers popup
问题描述
我一直在从事房地产项目,并且一直坚持在标记弹出窗口中添加reactcomponent.下图显示了弹出窗口的外观示例:弹出式示例
I have been working on a Real Estate project and I've got stuck on adding a reactcomponent inside a markers popup. The image below shows the example of how the popup should look like: Popup example
这是我尝试在标记上添加弹出窗口的代码:
This is the code where I am trying to add the popup on the marker:
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])
我不断收到相同的错误:
I keep getting the same error:
Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
请帮助我!
推荐答案
setDOMContent
的预期参数类型为 Node
,但返回类型为 ReactDOM.render
是 Component
.
https://reactjs.org/docs/react-dom.html#render
https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup#setdomcontent
The expected argument type of setDOMContent
is Node
, but the return type of ReactDOM.render
is 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
In React, use React.useRef
and .current
to refer dom content.
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>
</>
);
这篇关于MapBox无法在标记弹出窗口上添加react组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!