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

Question

我是 reactjs 的新手。 我擅长 javascript 和 jQuery，但在 ReactJS 方面很笨。 我有这个 jQuery 代码，我需要让它与 reactjs 一起工作。 这个 function 应该在循环上自动垂直滚动列表。 但我不知道如何在反应中做到这一点。

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 步：为子组件创建 refs

//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'
 })