Getting DOM node from React child element

Question

Using the React findDOMNode method that was introduced in v0 13 0 I am able to get the DOM node of each child component that was passed into a parent by mapping over this props children   However  if some of the children happen to be React Elements rather than Components  e g  one of the children is a  lt div gt  created via JSX  React throws an invariant violation error   Is there a way to get the correct DOM node of each child after mount regardless of what class the child is

User · Accepted Answer

this props children should either be a ReactElement or an array of ReactElement  but not components   To get the DOM nodes of the children elements  you need to clone them and assign them a new ref   render       return        lt div gt         React Children map this props children   element  idx    gt            return React cloneElement element    ref  idx                    lt  div gt           You can then access the child components via this refs childIdx   and retrieve their DOM nodes via ReactDOM findDOMNode this refs childIdx

User · Answer

If you want to access any DOM element simply add ref attribute and you can directly access that element    lt input type  text  ref  myinput  gt    And then you can directly   componentDidMount  function          this refs myinput select          Their is no need of using ReactDOM findDOMNode    if you have added a ref to any element

User · Answer

You can do this using the new React ref api   function ChildComponent   childRef        return  lt div ref  childRef    gt      class Parent extends React Component     myRef   React createRef       get doSomethingWithChildRef         console log this myRef      Will access child DOM node         render         return  lt ChildComponent childRef  this myRef    gt

User · Answer

I found an easy way using the new callback refs  You can just pass a callback as a prop to the child component  Like this   class Container extends React Component     constructor props        super props      this setRef   this setRef bind this         setRef node        this childRef   node        render         return  lt Child setRef   this setRef    gt         const Child      setRef      gt         lt div ref   setRef   gt       lt  div gt      Here s an example of doing this with a modal   class Container extends React Component     constructor props        super props      this state           modalOpen  false           this open   this open bind this      this close   this close bind this      this setModal   this setModal bind this         open         this setState   open  true           close event        if   this modal contains event target           this setState   open  false                 setModal node        this modal   node        render         let   modalOpen     this state     return          lt div gt           lt button onClick   this open   gt Open lt  button gt                      modalOpen    lt Modal close   this close   setModal   this setModal    gt    null                  lt  div gt               const Modal      close  setModal      gt       lt div className  modal  onClick   close   gt       lt div className  modal-window  ref   setModal   gt       lt  div gt     lt  div gt

User · Answer

React findDOMNode this refs myExample  mentioned in another answer has been deprectaed   use ReactDOM findDOMNode from  react-dom  instead  import ReactDOM from  react-dom  let myExample   ReactDOM findDOMNode this refs myExample

User · Answer

This may be possible by using the refs attribute   In the example of wanting to to reach a  lt div gt  what you would want to do is use is  lt div ref  myExample  gt    Then you would be able to get that DOM node by using React findDOMNode this refs myExample    From there getting the correct DOM node of each child may be as simple as mapping over this refs myExample children I haven t tested that yet  but you ll at least be able to grab any specific mounted child node by using the ref attribute    Here s the official react documentation on refs for more info

[reactjs] Getting DOM node from React child element

Examples related to reactjs