在React Redux GUI中从DOM访问SVG节点，用于将鼠标位置转换为viewBox坐标系和从viewBox坐标系转换鼠标位置

Question

我正在使用React渲染一些svg并使用Redux来存储我的应用程序的状态。为了确保我的鼠标输入是相对于svg viewBox，我需要访问DOM中的svg节点来调用getScreenCTM和一堆相关函数来将鼠标位置转换为viewBox坐标系并返回到事件处理程序。

是否有可能以安全的方式做到这一点？

是否可以使用我可以传递给我的事件处理程序的相同视图框来实例化我自己的这些东西所使用的类的版本？

是构建我自己的转换函数的正确方法，它可以进行正向和反向转换，因此我不需要在DOM中找到svg节点吗？

Answer 1

使用ref来表示全局变量。解决方案大致如下：

var SVG_REF

...

 <svg xmlns="http://www.w3.org/2000/svg"
             width="1000"
             height="500"
             ...
             ref={(svg_node) => {
                 if(svg_node != null) {
                     SVG_REF = svg_node
                 }

             }}>

在此之后，当我需要进行坐标系转换时，我可以访问SVG_REF。