Get a link to an element without using refs in the reaction

Question

I was told that refs are likely to be deprecated.

How then could I achieve the following, given this code:

export default class DemoAxis extends Component { componentDidMount() { const el = this.refs.line; const dimensions = .getDimensionsFromElement(el); } render() { return ( <div ref="line"> </div> ); } 

I need a link to a div line to get dimensions from it.

I know there is a ref callback, should I use this?

Answer 1

Only for string refs are deprecated, you can still use the ref callback :

 export default class DemoAxis extends Component { componentDidMount() { const dimensions = .getDimensionsFromElement(this._line); } render() { return ( <div ref={ (ref) => this._input = ref }> </div> ); } } 

Or in your case, you don’t need the link, just get the DOM node from the this component using ReactDOM.findDOMNode ( demo ):

 componentDidMount() { const dimensions = ReactDOM.findDOMNode(this).getBoundingClientRect(); console.log(dimensions); },