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

问题描述

我正在开发一些我们正在使用 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}&gt;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}&gt;</div>
        </div>
    }
})

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

标签： reactjstypescriptautoscrolluse-ref

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

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

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

问题描述

解决方案

推荐阅读