React 中的自动滚动 Div

大佬教程收集整理的这篇文章主要介绍了React 中的自动滚动 Div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React 中的自动滚动 Div？

我正在构建一个应用程序，用户可以添加评论，我无法让 div 自动滚动到底部，因此当用户评论时，他们的最新评论不会显示，除非他们滚动，因为我将溢出-y 设置为滚动。请问我如何在 React 中实现它？

评论区

<div classname = 'comments'>
          {item.comments.map((comment,indeX) => {
          return <h6 key = {index}><span classname ='comment-name'> {Comment.postedBy.namE} </span> {Comment.text}</h6>}
</div>

评论CSS

.comments {
  max-height: 20vh;
  overflow-y: scroll;
  padding-left: 1rem;
}

表单提交代码

 <form onsubmit = {(E) => {
                            e.preventDefault()
                            makeComment(e.target[0].value,item._ID)
                            e.target[0].value = null }
</form>
        

解决方法

display: flex;
flex-direction: column-reverse;

item.comments.slice(0).reverse().map((function...))

大佬总结

以上是大佬教程为你收集整理的React 中的自动滚动 Div全部内容，希望文章能够帮你解决React 中的自动滚动 Div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。