title: How do you get the height of a stateless functional component that's a child?
body: <p>I'm trying to get the height of a stateless child component, so that I'm able to use its height within a parent Class, but I am getting the following error: <code>Invariant Violation: Stateless function components cannot have refs.</code></p>
  
  <h1>Simplified code</h1>
  
  <h2>Parent class</h2>
  
  <pre><code>class App extends React.Component {
    componentDidMount() {
      console.log(this.header);
    }
    render() {
      return (
        &lt;Child ref={component =&gt; this.header = component} /&gt;
      )
    }
  }
  </code></pre>
  
  <h2>Child</h2>
  
  <pre><code>const Child = () =&gt; (
    &lt;header ref="header"&gt;
      Some text  
    &lt;/header&gt;
  )
  </code></pre>
  
  <p>Is there a way to do this?</p>
  
  <p>Here is a link to <a href="https://codepen.io/A7DC/pen/xLgZGK" rel="noreferrer">a Codepen with the error</a>.</p>
  
  <p><strong>Update:</strong></p>
  
  <h1>Actual code/context</h1>
  
  <p>So I've currently got a Header component, which looks like so:</p>
  
  <pre><code>export const Header = ({dateDetailsButton, title, logo, backButton, signUpButton, inboxButton, header}) =&gt; (
      &lt;header header className="flex flex-row tc pa3 bb b--light-gray relative min-h-35 max-h-35"&gt;
        {signUpButton ? &lt;Link to="/edit-profile-contact" href="#" className="flex z-2"&gt;&lt;AddUser /&gt;&lt;/Link&gt; : null }
        {backButton ? &lt;BackButton className="flex z-2" /&gt; : null }
        &lt;h1 className={logo ? "w-100 tc dark-gray lh-solid f4 fw5 tk-reklame-script lh-solid ma0" : "w-100 tc dark-gray lh-solid f4 fw4 absolute left-0 right-0 top-0 bottom-0 maa h1-5 z-0"}&gt;{title}&lt;/h1&gt;
        {dateDetailsButton ? &lt;Link to="/date-details" className="absolute link dark-gray right-1 top-0 bottom-0 maa h1-5 z-2"&gt;Details&lt;/Link&gt; : null }
        {inboxButton ? &lt;Link to="/inbox" href="#" className="flex mla z-2"&gt;&lt;SpeechBubble /&gt;&lt;/Link&gt; : null}
      &lt;/header&gt;
  )
  </code></pre>
  
  <p>In some instances, I want to add logic to this Header to animate it (for example, on the homepage when the user scrolls, I am animating the Header to become fixed when they scroll past a certain point - a sticky header, if you will). </p>
  
  <p>The way I've done this before was to just have a separate Class for a Header with particular functionality (as described above) and one without. But in order to keep my code DRY I have separated out the Header to be its own functional stateless component, with the view to wrap it in Class that gives it the sticky header functionality. </p>
  
  <p>Here's the Class for that:</p>
  
  <pre><code>export default class FeedHeader extends React.Component {
  
      constructor(props) {
          super(props);
          this.handleScroll = this.handleScroll.bind(this);
          this.state = {
              scrolledPastHeader: null,
              from: 0,
              to: 1,
          }
      }
  
      componentDidMount() {
          window.addEventListener('scroll', this.handleScroll);
          this.setState({navHeight: this.navHeight.offsetHeight});
      }
  
      componentWillUnmount() {
          window.removeEventListener('scroll', this.handleScroll);
      }
  
      handleScroll(e) {
          const { navHeight, scrolledPastHeader } = this.state;
          const wy = document.body.scrollTop;
          if (wy &lt; navHeight) this.setState({scrolledPastHeader: null})
          else if (wy &gt; navHeight &amp;&amp; wy &lt; 100) {
              this.setState({scrolledPastHeader: false})
          }
          else this.setState({scrolledPastHeader: true})
      }
  
      getMotionProps() {
          const { scrolledPastHeader } = this.state;
  
          return scrolledPastHeader === false ?
          {
              style: {
                  value: this.state.from
              }
          }
          : {
              style: {
                  value: spring(this.state.to)
              }
          }
      }
  
      render() {
          const { brand, blurb } = this.props;
          const { scrolledPastHeader } = this.state;
          return (
              &lt;Motion {...this.getMotionProps()}&gt;
                  {({value}) =&gt; {
                      return (
                          &lt;Header ref="child" title={this.props.title} backButton={false} signUpButton inboxButton logo/&gt;
                      );
                  }}
              &lt;/Motion&gt;
          )
      }
  }
  </code></pre>
  
  <p>So this is the context for this particular problem - I hope that makes things a little more clearer. </p>
  
  <p>P.s sorry for the lack of context, I imagined the answer would be more straight forward than what it seems!</p>