javascript - 如何创建垂直自动滚动效果？

Question

我是 ReactJS 新手。我擅长 javascript 和 jQuery，但不懂 ReactJS。我有这个 jQuery 代码，我需要让它与 ReactJS 一起工作。该函数应该在循环中自动垂直滚动列表。但我不知道如何在 react 中做到这一点。

function autoScroll(obj) {
    $(obj).find("container").animate({
        marginTop: "-28px"
    }, 500, function () {
        $(this).css({
            marginTop: "0px"
        }).find("li:first").appendTo(this);
    });
}
$(function () {
    setInterval('autoScroll(".container")', 3000);
})

鉴于我的组件

import React from 'react'

function List(props) {
   const lists = props.list
   const list_div = lists.map((lists, index) => {
      return (
         <li key={index}>{lists}</li>
      )
   })

   return(
      <ul className="container">{list_div}</ul>
   )
}

export default List

将不胜感激任何帮助。

Answer 1

第 1 步:将 ref 添加到您的组件

 //Create ref for parent component
 const containerRef = React.createRef()


//Set the created Ref to the element
<ul className="container" ref={containerRef}>{list_div}</ul>

第 2 步:创建子组件的引用

//Create ref to child components
lists.map((list,index) => listsRef[index] = React.createRef())

第 3 步:在您的事件(点击、加载等)中，添加此代码以自动在子组件之一中滚动

 this.containerRef.current.scrollTo({
    top: listsRef[index].offsetTop,
    left: 0,
    behavior:'smooth'
 })