如何将addEventListener等必要的原生DOM方法与react集成？

Question

我目前正在开发一个项目，涉及将 React 事件与我的代码库集成。但是，我在将它们与某些本身不支持

React

的库（例如

maplibregl

）合并时遇到了麻烦。因此，我不得不将元素添加为原生 HTML，就像向标记添加自定义 HTML 图标的情况一样。

这是我如何使用

maplibregl

做到这一点：

maplibregl

function renderS1Template(r, siteName){
        var template = `
        <div id="${r}" class='map-icon-holder' >
            <img  class='map-icon' src=${S1Icon} />
            <div class='map-icon-label' >
                <label >${siteName}</label>
            </div>
            
        </div>`
        
        return $(template)[0]
    }

        let template = renderS1Template(r, siteName)

            // create the marker with custom html component
            const marker1 = new maplibregl.Marker( template , {
                draggable: true,
                'nodeName' : nodeName
            })
            // .setLngLat([ coordinates.lng, coordinates.lat])
            .setLngLat([data.x, data.y])
            .setPopup(new maplibregl.Popup({ offset: 25 }))
            .addTo(props.callback.mapObject)

完成此操作后，我发现自己必须依赖原生事件（例如

.on('contextmenu')

）来处理交互。我的问题围绕如何消除对这些本机事件侦听器的需求并在这种情况下完全过渡到 React 事件。

我的疑问是，是否有一种可用的技术或方法，即使在处理本机 DOM 元素时也允许使用本机 React 事件？

Answer 1

有一种方法，我认为我们可以使用 useRef() 来代替 useState，因为它是可变的。