javascript - 可以在 .setHTML 或 .setDOMContent 中的 mapboxgl.Popup() 中渲染 react 组件吗？

Question

我想知道是否可以在 mapboxgl.Popup() 中渲染 React 组件。像这样的事情:

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

或者应该使用 ReactDOM.render 来完成？

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

该项目将在弹出窗口中包含连接到 redux 存储的按钮和输入。

感谢您的任何意见!

Answer 1

这有效:

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