React how to access the DOM element in my render function from the same component

Question

I am wondering what works best for accessing DOM elements inside my render function from the same component. Please note that I will show this component several times on the page.

eg.

var TodoItem = React.createClass({ ... render:function(){ function oneSecLater(){ setTimeout(function(){ //select the current className? this doesn't work, but it gives you an idea what I want. document.getElementsByClassName('name').style.backgroundColor = "red"; )}, 1000); } return( <div className='name'>{this.oneSecLater}</div> ) }) 

Answer 1

There is no need to use setTimeout. There are lifecycle methods for a component from which componentDidMount is called after rendering. This way you can get a link to your div in the method.

 var TodoItem = React.createClass({ ... componentDidMount: function () { if(this.myDiv) { this.myDiv.style.backgroundColor = "red"; } } render:function(){ return( <div className='name' ref = {c => this.myDiv = c}></div> ); }); 

Answer 2

You can use ReactDOM.findDOMNode(this) to access the underlying DOM node. But accessing the DOM node and manipulating, like you, are against the React programming style. It is better to use a state variable and call the setState method to re-render the DOM.

Answer 3

You can use ref callback to access the dom element in the reaction, and this is what React Docs recommends following

and do this in the componentDidMount lifecycle function, as refs will not be available until the DOM is created

 var TodoItem = React.createClass({ ... componentDidMount() { setTimeout(function(){ this.myDiv.style.backgroundColor = "red"; )}, 1000); } render:function(){ return( <div className='name' ref={(ele) => this.myDiv = ele}></div> ) }) 

Docs

Answer 4

Here is my solution: to get computedCss for a specific element, you need to first add the ref attribute to the element.

enter image description here

 render(){ <div> <Row className="chartline2"> <Col className="gutter-row" span={24}> <div className="gutter-box lineChartWrap" id="lineChartWrap" ref="lineChartWrap"> <LineChart data={lineChartData} options={lineChartOptions} width="100%" height="300"/> </div> </Col> </Row> </div> } 

And then, in the componentDidUpdate () function, get your css element using window.getComputedStyle (this.refs.lineChartWrap) .XXX enter the image description here

  componentDidUpdate(){ console.log("------- get width ---"); let ele = document.querySelector("#lineCharWrap"); console.log(this.refs.lineChartWrap); console.log(window.getComputedStyle(this.refs.lineChartWrap).width); } 

Answer 5

You should avoid accessing the DOM element because the whole point of the reaction is to place an abstraction over the dom. React stores the DOM representation in memory called VirtualDom. Working with VirtualDom will facilitate unit testing of your application. If you really know what you are doing, here's how to do it:

 componentDidMount(){ const name=this.name.current.style() //current will return the actual DOM element } name=React.createRef() //create a ref object <div ref={this.name} className="anything" /> //your classname does not need to be named as "name". You access the element via the "ref" attribute not the classname. 

In ComponentDidMount, when your component is mounted, its style change will be applied.

Answer 6

I just came across this after trying to perform form validation before opening the modal layout of the validation using React 14.

I would like to point out that you are not actually accessing the DOM element with links. You simply access the React Component object. Shown here:

The top calls ref.ticketForm , the bottom shows document.getElementById('ticketform') .

The reason I needed to do this was as follows:

 <Button color="success" size="lg" type="button" onClick={(e) => { const ticketForm = document.getElementById('ticketForm'); const isValid = ticketForm.reportValidity(); if (!isValid) e.stopPropagation(); }}>Buy Tickets</Button> 

reportValidity() is a DOM element method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

Addressing this problem, this person showed that this method is used on a reference object, which, of course, is not correct: https://github.com/azmenak/react-stripe-checkout/issues/121#issuecomment-431635855

Hopefully this makes it clear that DOM elements are not explicitly equal React Components. If you need to manipulate the DOM in any way, first do it in a responsive way. This is an extreme case where I would rather rely on form validation for a dynamic form rather than on manual validation.

Answer 7

 componentDidMount(){ document.querySelector("#myElem").innerHTML = "Boom!"; }