如何通过ref获取组件的位置?

I'm using React 15.3.1 for my app. So, I need to get Component x and y positions in it's parent. The child is rendered like this:

我在app中使用的是response。15。1所以我需要在它的父元素中找到x和y的位置。孩子是这样表现的:

<Icon key={key} ref={(c) => this['icon' + key] = c}}/>;

And this is how I try to access Icon (which is basically a div) position:

这就是我如何访问图标(基本上是div)位置:

let icon = this['icon' + this.state.currentIcon.id];
icon.getBoundingClientRect(); //Error: "getBoundingClientRect" is not a function

The child is correct, I can see it's props in the debugger. But I cannot see any properties like getBoundingClientRect, left, top or any other position attributes. What I need to do to get them?

孩子是对的，我可以看到调试器里的道具。但是我看不到任何属性，比如getBoundingClientRect、left、top或其他位置属性。我需要做什么才能得到它们?

1 个解决方案

#1

Your ref will refer to Icon, which I'm guessing is a React Component. You need to resolve the actual React Element (DOM element) before the getBoundingClientRect method will be available.

您的ref将引用图标，我猜测它是一个React组件。在getBoundingClientRect方法可用之前，您需要解析实际的React元素(DOM元素)。

You can do this through the ReactDOM.findDOMNode() function.

您可以通过response . finddomnode()函数来实现这一点。

let icon = this['icon' + this.state.currentIcon.id];
const domNode = ReactDOM.findDOMNode(icon);
domNode.getBoundingClientRect()

#1