title: Propagate methods from grand-child component
body: <p>I have a dumb component, <code>List</code>, that has some methods defined like this:</p>
  
  <pre><code>class List extends React.Component {
      ...
  
      scrollTo() {
      ...
      }
  
      clear() {
      ...
      }
  }
  </code></pre>
  
  <p>I then use it in a Parent Component, let's say <code>UsersList</code>:</p>
  
  <pre><code>class UsersList extends React.Component {
      render() {
          return &lt;List {...this.props} {...} /&gt;;
      }
  }
  </code></pre>
  
  <p>Then I have as a Parent I have <code>FriendsPage</code>:</p>
  
  <pre><code>class FriendsPage extends React.Component {
      render() {
          return (
              ...
              &lt;UsersList ref={(ref) =&gt; { this.usersListRef = ref; }} {...} /&gt;
          );
      }
  }
  </code></pre>
  
  <p>I'd like to be able to call <code>this.usersListRef.scrollTo()</code> for example in <code>FriendsPage</code>, without having to define the methods of <code>List</code> in <code>UsersList</code>.</p>
  
  <p>I can pass a prop called <code>listRef</code> and use it as <code>ref={this.props.listRef}</code> but I was wondering if another solution exists.</p>