React之ref使用方法

需求场景

做自滚动列表,需要拿到列表的指定div,然后去操作滚动条实现自滚动

实现需求

起初是通过给列表固定ID, 获取div,然后操作滚动条

let container: any = document.getElementById('myRollList');

return (
    <div id="myRollList" >
      <List dataSource={dataSource}  />
    </div>
  );

后来发现当一个页面引入两个自滚动列表的时候,就会出现定时器操作的dom是一样的甚至只能操作第一个 于是 开始尝试使用ref

import React, { useRef } from 'react';


export default function Lists(props: any) {
  const dom = useRef<any>(); // dom元素

	//获取dom元素
    let container = dom.current;


return(
	<div ref={dom}>
		<List  dataSource={dataSource}  />
	</div>
  )
}