Javascript 是否可以在.setHTML或.setDOMContent中的mapboxgl.Popup（）中呈现react组件？

我想知道是否可以在mapboxgl.Popup（）中呈现react组件。大概是这样的：

    componentDidMount() {
            new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(`<div>${<MapPopup />}<p>${moreText}</p></div>`)
            //.setDOMContent(`${<MapPopup />}`) ?????
            .addTo(this.props.mapboxMap)
    })

componentDidMount（）{
新建mapboxgl.Popup（）
.setLngLat（坐标）
.setHTML（`${}${moreText}
`）
//.setDOMContent（`${}'）？？？？？
.addTo（此.props.mapboxMap）
})

还是应该使用ReactDOM.render来完成

ReactDOM.render(<MapPopup />, document.getElementById('root'))

ReactDOM.render（，document.getElementById（'root'））

此项目将在弹出窗口中具有连接到redux存储的按钮和输入

---

谢谢你的意见

我也一直在努力解决这个问题。我找到的一个解决方案是使用ReactDOM.render（）。我创建了一个空的弹出窗口，然后使用mapboxgl生成的容器来呈现我的React组件

    marker.setPopup(new mapboxgl.Popup({ offset: 18 }).setHTML(''));


     markerEl.addEventListener('mouseenter', () => {
        markerEl.classList.add('enlarge');

        if (!marker.getPopup().isOpen()) {
          marker.getPopup().addTo(this.getMap());

          ReactDOM.render(
            component,
            document.querySelector('.mapboxgl-popup-content')
          );
        }
      });

这项工作：

addPopup(el: JSX.Element, lat: number, lng: number) {
    const placeholder = document.createElement('div');
    ReactDOM.render(el, placeholder);

    const marker = new MapboxGl.Popup()
                        .setDOMContent(placeholder)
                        .setLngLat({lng: lng, lat: lat})
                        .addTo(map);
}

（我用typescript来说明类型，但是你可以把它们留给纯js）

addPopup(<h1>Losers of 1966 World Cup</h1>, 52.5, 13.4);

addPopup（1966年世界杯失败者，52.5，13.4）；

您可以尝试实现React组件：

export const Popup = ({ children, latitude, longitude, ...mapboxPopupProps }) => {
    // this is a mapbox map instance, you can pass it via props
    const { map } = useContext(MapboxContext);
    const popupRef = useRef();

    useEffect(() => {
        const popup = new MapboxPopup(mapboxPopupProps)
            .setLngLat([longitude, latitude])
            .setDOMContent(popupRef.current)
            .addTo(map);

        return popup.remove;
    }, [children, mapboxPopupProps, longitude, latitude]);

    return (
        /**
         * This component has to have 2 divs.
         * Because if you remove outter div, React has some difficulties
         * with unmounting this component.
         * Also `display: none` is solving that map does not jump when hovering
         * ¯\_(ツ)_/¯
         */
        <div style={{ display: 'none' }}>
            <div ref={popupRef}>
                {children}
            </div>
        </div>
    );
};

export const Popup=（{子项、纬度、经度，…mapboxPopupProps}）=>{
//这是一个mapbox地图实例，可以通过道具传递
const{map}=useContext（MapboxContext）；
const popupRef=useRef（）；
useffect（（）=>{
const popup=new MapboxPopup（mapboxPopupProps）
.setLngLat（[经度，纬度]）
.setDOMContent（popupRef.current）
.addTo（地图）；
返回弹出窗口。删除；
}，[children，mapboxPopupProps，经度，纬度]；
返回(
/**
*此组件必须有2个div。
*因为如果删除outter div，React会有一些困难
*通过卸载此组件。
*另外，“display:none”用于解决悬停时地图不会跳转的问题
* ¯\_(ツ)_/¯
*/
{儿童}
);
};

经过一些测试，我意识到

弹出窗口

组件没有在地图上正确呈现。而且卸载组件也没有成功。这就是为什么有两个div作为回报。但是，它可能只在我的环境中发生

有关其他

mapboxPopupProps

useffect

依赖项确保每次该列表中的某些内容发生更改时都会重新创建MapboxPopup，并使用

return popup.remove；

const mapCardNode=document.createElement（“div”）；
const mapCardNode = document.createElement("div");

mapCardNode.className = "css-class-name";

ReactDOM.render( 
  <YourReactPopupComponent / > ,
  mapCardNode
);

//if you have a popup then we remove it from the map
if (popupMarker.current) popupMarker.current.remove();

popupBox.current = new mapboxgl.Popup({
        closeOnClick: false,
        anchor: "center",
        maxWidth: "240px",
    })
    .setLngLat(coordinates)
    .setDOMContent(mapCardNode)
    .addTo(map);

mapCardNode.className=“css类名”；
ReactDOM.render（
,
mapCardNode
);
//如果您有一个弹出窗口，那么我们将其从地图中删除
if（popupMarker.current）popupMarker.current.remove（）；
popupBox.current=新建mapboxgl.Popup({
closeOnClick:false，
主播：“中心”，
最大宽度：“240px”，
})
.setLngLat（坐标）
.setDOMContent（mapCardNode）
.addTo（地图）；

尝试使用

onClick

事件，而不是创建按钮。之后，将您的react组件放入

onClick

事件添加事件侦听器引用链接

---

[1] ：

不确定为什么未将其标记为正确，但它应该是正确的。您不一定需要使用此包装器函数模式，但基本思想是创建一个或类似的节点，在其中呈现一些JSX，并将该节点添加为弹出窗口的DOM内容。