Javascript 如何转到react中的最后一个元素？

我尝试了

scrollIntoView

并使用了

.lastchild

，但我无法查看最新的评论。使用了

窗口。滚动到
也找不到任何解决方案

有人能对什么有效提出一些建议吗

     const click = () => {
                fetch('url')
                .then(res => res.json())
                .then(data => {
                    if (data.affectedRows > 0) {
                       var element = document.getElementById("txt").lastChild;
                        element.scrollIntoView({behavior: "smooth", block: "end", inline: "center"});
                 }
            })
        }         
}

 {getComment.map(cmnt =>
                        <div key={cmnt.comment_id} className="article-comments-reply">
                            <div className="text-box" id="txt">
                                <h3>{cmnt.username}</h3>
                                <div className="reply-box">
                                    <h4>{cmnt.comment_text}</h4>
                                </div>
                            </div>
                        </div>
)}

const click=（）=>{
获取（'url'）
.then（res=>res.json（））
。然后（数据=>{
如果（data.affectedRows>0）{
var element=document.getElementById（“txt”）.lastChild；
scrollIntoView（{行为：“平滑”，块：“结束”，内联：“中心”}）；
}
})
}         
}
{getComment.map（cmnt=>
{cmnt.username}
{cmnt.comment_text}
)}
您不需要使用最后一个孩子。使用工具通过选择器获取元素也不是React中的最佳解决方案

只需将父元素的
scrollTop
设置为其
高度
。
看起来是这样的：

ref.current.style.scrollBehavior = 'smooth';

ref.current.scrollTop=ref.current.scrollHeight；

此
ref
应指向您的父组件，其中包含此代码：

{getComment.map(cmnt =>
  <div key={cmnt.comment_id} className="article-comments-reply">
      <div className="text-box" id="txt">
          <h3>{cmnt.username}</h3>
          <div className="reply-box">
              <h4>{cmnt.comment_text}</h4>
          </div>
      </div>
  </div>
)}

因此，它可以很容易地转换成一个
自定义钩子
，可以在任何元素上执行平滑滚动

自定义钩子
使用ScrollToBottom

export const useCrollToBottom=（ref）=>{
常量scrollToBottom=（）=>{
ref.current.style.scrollBehavior='smooth'；
ref.current.scrollTop=ref.current.scrollHeight；
};
返回{
滚动体底部，
}
}

使用

/。。。
const ref=useRef（）；
常量{scrollToBottom}=UseCollToBottom（ref）；
useffect（（）=>{
//需要时滚动
scrollToBottom（）；
}, []);
返回(
{
//一些元素
}
)
// ...
您不需要使用最后一个孩子。使用工具通过选择器获取元素也不是React中的最佳解决方案

只需将父元素的
scrollTop
设置为其
高度
。
看起来是这样的：

ref.current.style.scrollBehavior = 'smooth';

ref.current.scrollTop=ref.current.scrollHeight；

此
ref
应指向您的父组件，其中包含此代码：

{getComment.map(cmnt =>
  <div key={cmnt.comment_id} className="article-comments-reply">
      <div className="text-box" id="txt">
          <h3>{cmnt.username}</h3>
          <div className="reply-box">
              <h4>{cmnt.comment_text}</h4>
          </div>
      </div>
  </div>
)}

因此，它可以很容易地转换成一个
自定义钩子
，可以在任何元素上执行平滑滚动

自定义钩子
使用ScrollToBottom

export const useCrollToBottom=（ref）=>{
常量scrollToBottom=（）=>{
ref.current.style.scrollBehavior='smooth'；
ref.current.scrollTop=ref.current.scrollHeight；
};
返回{
滚动体底部，
}
}

使用

/。。。
const ref=useRef（）；
常量{scrollToBottom}=UseCollToBottom（ref）；
useffect（（）=>{
//需要时滚动
scrollToBottom（）；
}, []);
返回(
{
//一些元素
}
)
// ...
您的提取只是返回数据，您是否正在尝试获取最后一个提取的项目？因为最后一个孩子的方法不能解决这个问题。。您的取回只是返回数据，您是否正在尝试获取最后一个取回的项目？因为最后一个孩子的方法不能解决这个问题。。TypeError:无法读取未定义的属性“style”。我得到了这个错误。@ShahariarRahmanSajib，试试这个代码沙盒：TypeError:无法读取未定义的属性'style'。我得到了这个错误。@ShahariarRahmanSajib，试试这个代码沙盒：