在 React + Typescript 中的每个按钮单击事件中自动滚动到最后 div

Question

我正在开发我们正在使用 React + Typescript 开发的一些应用程序。在此我想实现自动滚动功能以持续 div。所以我有一些父 div，因为我根据我的对象数组中的数据添加子 div。我在单击按钮时在该对象中添加数据。因此，无论何时将新数据添加到该对象中，它都将在子组件中可见。因此相应地滚动应该在 div 的末尾自动进行。

我已经尝试了一些逻辑，所以根据该功能是有效的，但它滚动到父 div 的一半，但没有滚动到它的末尾。

我提供我的代码供参考。

ParentComponant.tsx
 
import { useRef, useEffect } from"react"
import { ChildComponant } from'./ChildComponant'
 
exportconst SearchResult = () => {
const myRef = useRef<null | HTMLDivElement>(null)
const [oldData, setOldData] = useEffect([])
 
const executeScroll = () => {
        myRef.current?.scrollIntoView()
    }
 
const addMoreData = () => {
let data = {
            id: 1,
            content: 'dummy content'
        }
let temp = [...oldData]
        temp.push(data)
        setOldData(temp)
        executeScroll()
    }
 
return (
        <div>
            <button onClick={addMoreData}>Click Me</button>
            <ChildComponant
                ref={myref}
                someData={oldData}
            />
        </div>
    )
}
 
ChildComponant.tsx
 
import React from'react'
 
interface dummyModel {
    id: number
    content: string
}
 
exportinterface ChildComponantProps {
    someData: dummyModel[]
}
 
exportconst ChildComponant = React.forwardRef<HTMLDivElement, ChildComponantProps>(({
    someData
}, ref) => {
 
return {
        <div>
            <div className="parent_div"> // We add content into this dynamically
            {someData.map((v,k) => {
                return (
                    <div className="child_div">
                        {v.content}
                    </div>
                )
            })
            }
            </div>
            <div ref={ref}></div>
        </div>
    }
})

所以请帮我解决这个问题，因为我已经尝试了很多方法，但仍然没有得到解决。提前致谢。

Answer 1

您需要在数据更新后执行滚动，但在您的情况下，您是在 setState（异步）之后立即调用它。我建议你在 oldData 更新时调用 executeScroll:

useEffect(() => {
 executeScroll()
},[oldData])

Answer 2

我已经使用下面的代码解决了这个问题。

在底部移动滚动条的调用函数内部完成的更改

const executeScroll = () => {
    if (myRef) {
      myRef.current?.scroll({ top: myRef.current?.scrollHeight, behavior: 'smooth' })
    }
  }

并且在 JSX 中，我只在子组件中添加了 ref 到 parent_div class，并删除了我之前添加 ref 的最后一个空 div。

此更改对我有用。

在 React + Typescript 中的每个按钮单击事件中自动滚动到最后 div

Auto scroll to last div on every button click event in React + Typescript

reactjs

typescript

autoscroll

use-ref