title: Add refs to react component when know the id
body: <p>I want to make the table on ant design scroll but ant design table does not have the onScroll (event)</p>
  
  <p>Problem:
  <a href="https://github.com/ant-design/ant-design/issues/5904" rel="nofollow noreferrer">https://github.com/ant-design/ant-design/issues/5904</a></p>
  
  <p>And they suggest the solution like this</p>
  
  <pre><code>componentDidMount() {
  ...
  var tableContent = document.querySelector('.ant-table-body')
      tableContent.addEventListener('scroll', (event) =&gt; {
        // checking whether a selector is well defined
        console.log('yes, I am listening')
        let maxScroll = event.target.scrollHeight - event.target.clientHeight
        let currentScroll = event.target.scrollTop
        if (currentScroll === maxScroll) {
           // load more data
        }
      })
  ...
  }
  </code></pre>
  
  <p>He adds the scroll event on element with the id '.ant-table-body';</p>
  
  <p>And also someone said 'better use refs' instead</p>
  
  <p>Could you show me how to solve the problem (add scroll event on ant table) by using refs?</p>
  
  <p>How can I use the refs to refer to the component when I know the id '.ant-table-body'. Note that I cannot access the component '.ant-table-body'.</p>
  
  <p>something like this: tableRef = refs.findById('.ant-table-body')? or tableRefs = refs.addRefToId('.ant-table-body')</p>