How to get position of element React | Redux (.getBoundingClientRect() + .getWrappedInstance())

reactjs redux getboundingclientrect
DSz picture DSz · Jun 13, 2017 · Viewed 9.3k times · Source

I am trying to find a position of a component rendered with React. I am using redux, so I had to modify the connect function to: 

export default connect(mapStateToProps, mapDispatchToProps,null,{ withRef: true })(MyComponent);

Now I am getting a component back when I call: 

class OneColumn extends Component { 
    componentDidMount(){

        var input = this.refs.myComponentsRef.getWrappedInstance();

        console.log(input); // Outputs > TheComponentIWant {props: Object, context: Object, refs: Object, updater: Object, _reactInternalInstance: ReactCompositeComponentWrapper…}

        var inputRect = input.getBoundingClientRect(); 
        console.log(inputRect); // Outputs error: Uncaught TypeError: input.getBoundingClientRect is not a function
    }
//...
}

So I can get the component, however I cannot then get the boundingClientRect.

Anything I am overlooking?

Please help:)

Answer

DSz picture DSz · Jun 13, 2017

I found an alternate solution that circumvents this problem: This post describes and refers to another post

Basically when the components starts rendering the components give a callback function where you store the positions of those components.

Related questions

React - Display loading screen while DOM is rendering?

This is an example from Google Adsense application page. The loading screen displayed before the main page showed after. I don't know how to do the same thing with React because if I make loading screen rendered by React component, …

Read More
Why use Redux over Facebook Flux?

I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps). As I understand, official redux doc motivations provide pros comparing to traditional MVC architectures. BUT it doesn't provide an answer …

Read More
What is mapDispatchToProps?

I was reading the documentation for the Redux library and it has this example: In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called mapDispatchToProps() that receives the dispatch() …

Read More