Attempting to use refs with scrollContainer?

This issue has been tracked since 2021-02-09.

Hello, I have been trying to use scrollContainer to attach the scroll event listener to a scrollable material ui table component, but I am a little confused about what the correct way to do this is with functional components (I have been reading that using a query selector string in a functional component like this isn't ideal, although I haven't gotten that to work either). I have done quite a bit of asking around and searching for solutions to this and still have not come up with anything. I will attach some simplified code to hopefully help understand what I am trying to achieve.

export default function StickyHeadTable() {
/some vars here
const tableContainerRef = useRef();
return (
<Paper>
<TableContainer ref={tableContainerRef}> /this is the scrollable container I need to reference in the scrollContainer on LazyLoad
/pseudocode table row and table cell
<LazyLoad scrollContainer={tableContainerRef.current} height={200} offset={200}>
/data here
</LazyLoad>
</TableContainer>
</Paper>
);

In this code example the scrollable container I need to reference inside my LazyLoad component is the TableContainer element, how would I go about adding that ref to scrollContainer?

EDIT: I tried creating a ref like in the code above but the reference to the TableContainer is null, because TableContainer is not yet rendered when the ref gets passed to the scrollContainer prop on LazyLoad. Is there some kind of solution to this with useEffect?

Thanks, I appreciate any help I can get with this.

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date