title: react - accessing DOM without breaking encapsulation
body: <p>Is there a cannonical way of going about doing something like the following without breaking encapsulation?</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  
  class Dashboard extends Component {
      constructor(props, context) {
          super(props, context);
  
          this.setRef = ::this.setRef;
      }
      componentDidMount() {
          const node = ReactDOM.findDOMNode(this.someRef);
          const newHeight = window.innerHeight - node.offsetTop - 30;
          node.style.maxHeight = `${newHeight}px`;
      }
  
      render() {
          return (
              &lt;div id="some-element-id" ref={this.setRef}&gt;
              &lt;/div&gt;
          );
      }
  
      setRef(ref) {
          this.someRef= ref;
      }
  }
  </code></pre>
  
  <p><a href="https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode"><code>ReactDOM.findDOMNode</code></a> seems to be the suggested way of going about this, but this still breaks encapsulation and the documentation has a big red flag to this extent.</p>