Question

我想访问一个SVG元素的位置，以在React中绘制另一个SVG元素。因此，我想使用getBoundingClientRect()并需要从相邻的SVG元素访问第一个SVG元素的DOM。

编辑： 示例：我有一个circle，并想在其上方绘制一个rect。

在安装OtherSVGELement之后，我可以访问圈子参考。但是渲染circle

时，无法访问相邻的rect元素ref

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.firstRef = React.createRef();
    };
    render() {
        return (
            <svg>
                <circle ref={this.firstRef} />
                <OtherSVGElement circleRef={this.firstRef}/>
            </svg>
        )
    };
};

class OtherSVGElement extends React.Component {
    constructor(props) {
        super(props);
    };

    componentDidMount() {
        console.log(this.props.circleRef.current);
    };


    render() {
       return (
           <svg>
               /* Doesn't work; current is null */
               <rect x=this.props.circleRef.current.x /> 
           </svg>
       )
    };
};

我该如何克服这个问题？就我而言，很难获得圈子的位置。这就是为什么我想使用getBoundingClientRect()。

Answer 1

您的直觉是正确的。您将可以访问其他生命周期挂钩中的ref，例如componentDidMount和componentDidUpdate：

componentDidMount() {
  console.log(this.props.otherRef);
}

顺便说一句，您可能正在参考（current）上寻找this.props.otherRef.current属性，该属性将成为DOM节点的参考。

将通过引用反应到相邻组件

1 个答案: