Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the alternative for ReactDOM.findDOMNode() as it is deprecated now?

Tags:

reactjs

ref

refs

I have an old code which is using findDOMNode().

Here is my code, where someComponent1 and Expand is already imported.

Here I have some doubt the code I have written with findDOMNode() is working perfectly fine but as it is deprecated now I want to remove it. I have gone through many document and found to use portals or refs instead of this. I have a understanding that if I am using ref then the variable get bind to that also has an access to the DOM element, but I guess I am wrong as it is working in that way. Can someone please correct my understanding on this

class classA extends Component {

  componentDidMount() {
    new Expand(ReactDOM.findDOMNode(this.expand))
    // new Expand(this.expand)    
  }

  render(){

    return(
      <someComponent1 className={style.container} ref={e => this.expand= e}/>
    )
  }
}
like image 856
Bishal Jain Avatar asked May 30 '18 05:05

Bishal Jain


1 Answers

As per this github issue and ReactDocs,ReactDOM.findDOMNode is not deprecated but its usage is discouraged and should only be used as an escape hatch. In order to replace it, you need to specify the ref on the DOM element which in your case would look like

class classA extends Component {

  componentDidMount() {
     new Expand(this.expand)    
  }

  render(){

    return(
      <SomeComponent1 className={style.container} innerRef={e => this.expand= e}/>
    )
  }
}

class SomeComponent1 extends React.Component {
    render() {
       return <div ref={this.props.innerRef}>Hello</div>
    }
}
like image 97
Shubham Khatri Avatar answered Nov 04 '22 00:11

Shubham Khatri