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

Posted 2023-04-01

【中文标题】在 React + Typescript 中的每个按钮单击事件上自动滚动到最后一个 div

【英文标题】：Auto scroll to last div on every button click event in React + Typescript

【发布时间】：2021-12-24 04:05:15

【问题描述】：

我正在开发一些我们正在使用 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>
    ​​​​​​​
​​​​​​​)

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

【参考方案1】：

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

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

【讨论】：

仍然无法正常工作。我的意思是我以前的行为

【参考方案2】：

我已经通过使用以下代码解决了这个问题。

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

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

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

这些更改对我有用。