反应-无法获得this.refs

Question

I am using React 0.14.7. Inside my render I am trying to access ref "progressBar", but without success ( I get 'undefined' in the console ). what am I doing wrong?

let element = this.refs.progressBar;
console.log( element );
element.style.transform = 'rotate('+ deg +'deg)'; 



 return(
    ...
       <div className="bar-progress">
           <div className="bar-progress-fill" ref="progressBar"></div>
       </div>
       ...);

Answer 1

That happens because refs are not available in initial render as you are trying to access it even before its created. You should be doing it in the componentDidMount function, if you only want to do it once or add it with a condition in componentDidUpdate as React Docs warns you to not use it in render.

NOTE: React docs suggesst you on using the callback approach for refs over string approach See this documentation

So modify your code like

 class App extends React.Component { state = { count: 0 } componentDidMount(){ var deg = 30; let element = this.progressBar; console.log( element ); element.style.transform = 'rotate('+ deg +'deg)'; this.setState({count: 1}); } render() { console.log(this) return( <div className="bar-progress"> <div className="bar-progress-fill" ref={(pb) =>this.progressBar=pb}></div> </div> ); } } ReactDOM.render(<App/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

You can not access refs inside render() . Refs is accessable only inside react lifecycle methods.

In your case you should use componentDidUpdate() lifecycle method.

componentDidUpdate() {
let element = this.refs.progressBar;
console.log( element );
element.style.transform = 'rotate('+ deg +'deg)'; 

}

EDIT 1 : ref is accessable inside render() , but refs are not available in initial render. Please refer the link for more details.
Example: Fiddle

DOC: https://zhenyong.github.io/react/docs/more-about-refs.html#cautions