Get the current element?

Question

If I'm using something like this to set style:

<div style={this.setStyle()}>

  setStyle () {
    const style = {}
    if (this.state.fullScreen) {
      style.background = 'white'
      style.position = 'absolute'
      style.top = ???
    }
    return style
  }

How can I get the elements properties like .offsetLeft or .scrollLeft inside the funciton setStyle?

Answer 1

Use refs.

First, hook-up a ref attribute on your JSX element:

<div ref="myElement" style={this.setStyle()}>

Then, use this ref inside the setStyle method, to access the component's DOM node (the actual HTMLElement) offsetLeft or scrollLeft or anything else that you need.

setStyle () {
  // ...

  // this.refs.myElement is the DOM element
  const offsetLeft = this.refs.myElement.offsetLeft;

  return style;
}