我想建立一个聊天系统,并自动滚动到底部时,进入窗口,当新的消息进来。如何在React中自动滚动到容器底部?
当前回答
我不能得到以下任何答案的工作,但简单的js为我做的伎俩:
window.scrollTo({
top: document.body.scrollHeight,
left: 0,
behavior: 'smooth'
});
其他回答
感谢@enlitement
我们应该避免使用findDOMNode, 我们可以使用引用来跟踪组件
render() {
...
return (
<div>
<div
className="MessageList"
ref={(div) => {
this.messageList = div;
}}
>
{ messageListContent }
</div>
</div>
);
}
scrollToBottom() {
const scrollHeight = this.messageList.scrollHeight;
const height = this.messageList.clientHeight;
const maxScrollTop = scrollHeight - height;
this.messageList.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
}
componentDidUpdate() {
this.scrollToBottom();
}
参考:
https://facebook.github.io/react/docs/react-dom.html#finddomnode https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/
const scrollingBottom = () => {
const e = ref;
e.current?.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "start",
});
};
useEffect(() => {
scrollingBottom();
});
<span ref={ref}>{item.body.content}</span>
完整版(Typescript):
import * as React from React 导出类DivWithScrollHere扩展React。组件<any, any> { loading:any = React.createRef(); componentDidMount () { this.loading.scrollIntoView(假); } 呈现(){ 回报( <div ref={e =>{这个。装载= e;}}> <LoadingTile /> </div> . txt ) } }
为了向下滚动到页面底部,首先我们必须选择位于页面底部的id。然后我们就可以使用文档了。getElementById选择id并使用scrollIntoView()向下滚动。请参考以下代码。
scrollToBottom= async ()=>{
document.getElementById('bottomID').scrollIntoView();
}
我在消息的末尾创建了一个空元素,并滚动到该元素。不需要跟踪裁判。
推荐文章
- 如何滚动到底部的反应?
- 什么是React受控组件和不受控组件?
- npm犯错!代码UNABLE_TO_GET_ISSUER_CERT_LOCALLY
- 反应-显示加载屏幕,而DOM是渲染?
- 如何解决“不能在模块外使用导入语句”在开玩笑
- 是否有可能在react渲染函数中返回空?
- 使用Redux而不是Flux的缺点是什么
- 反应:为什么当道具改变时子组件不更新
- React vs ReactDOM?
- Axios -删除请求与请求体和头?
- “react-scripts”不被视为内部或外部命令
- 如何从状态数组中删除一个项目?
- 是否可以用if…else…语句在React渲染函数?
- 如何设置默认的复选框ReactJS?
- 反应。类型无效——期望为字符串