Add refs to react component when know the id

Question

I want to make the table on ant design scroll but ant design table does not have the onScroll (event)

Problem: https://github.com/ant-design/ant-design/issues/5904

And they suggest the solution like this

componentDidMount() {
...
var tableContent = document.querySelector('.ant-table-body')
    tableContent.addEventListener('scroll', (event) => {
      // 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
      }
    })
...
}

He adds the scroll event on element with the id '.ant-table-body';

And also someone said 'better use refs' instead

Could you show me how to solve the problem (add scroll event on ant table) by using refs?

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'.

something like this: tableRef = refs.findById('.ant-table-body')? or tableRefs = refs.addRefToId('.ant-table-body')

Answer 1

First add a ref to your table, like this:

<Table ref={table => { this.table = table }}

Then in componentDidMount you can add the same event listener to it like this:

componentDidMount() {
   if(this.table) {
      this.table.addEventListener('scroll', (event) => {
         // do your stuff here
      })
   }
}