React access DOM test

react - accessing DOM without breaking encapsulation

HTML

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

</div>

JavaScript

var Component = React.createClass({
	getInitialState: function(){
  	return {
    	style: {backgroundColor: '#aaa', height: '40px'},
    }
  },
  componentDidMount: function(){
  	var node = ReactDOM.findDOMNode(this);
    var newHeight = window.innerHeight - node.offsetTop - 30;
  	this.setState({style: {backgroundColor: '#bbb', height: newHeight.toString() + 'px' }});
  },
  render: function(){
  	return React.createElement('div', {style: this.state.style}, 'Height: ' + this.state.style.height);
  },
});

ReactDOM.render(React.createElement(Component), document.getElementById('test'));