Javascript 在安装组件之前,设置滚动位置
我有下面的react组件,它本质上是一个聊天框Javascript 在安装组件之前,设置滚动位置,javascript,reactjs,Javascript,Reactjs,我有下面的react组件,它本质上是一个聊天框 render(){ const messages = this.props.messages; return( <div id="project_chat"> <h1>{this.props.project[0].project}</h1> <div className="chat_room"> <div cla
render(){
const messages = this.props.messages;
return(
<div id="project_chat">
<h1>{this.props.project[0].project}</h1>
<div className="chat_room">
<div className="messages" ref="messages">
<Waypoint onEnter={this.activateWayPoint}/>
<ul>
{messages.map((message) => {
return(
<Message key={uuid.v4()} message={message}/>
)
})}
</ul>
</div>
<div className="chat_message_box">
<input type='text' onChange={this.handleChange} value={this.state.message} className="message_box" placeholder="enter message"/>
<button className="submit_message" onClick={this.handleSubmit}>Submit</button>
</div>
</div>
</div>
)
}
这会在安装组件后触发,即消息框滚动位置最初从顶部开始,并在渲染时强制向下移动
这通常很好,但我正在使用一个名为react waypoint
的库,它可以帮助我对聊天信息进行分页。每次我在容器顶部时都会触发此操作
令人不快的结果是,由于消息框最初在装载时从顶部开始,因此航路点也总是在装载时被触发
我的问题是,我是否可以强制消息组件从底部开始,而不是从顶部开始,然后从底部开始
我试过这么做
componentWillMount(){
this.refs.messages.scrollTop = this.refs.messages.scrollHeight
}
问题是,在安装组件之前,我无法访问引用。还有其他方法吗?您想要的是避免触发
此。在设置scrollTop
之前激活路径点
您可以通过最初将状态变量waypointReady
设置为false
来完成此操作。在componentDidMount
中将其设置为true
然后,您可以修改this.activateWayPoint
以检查this.state.waypointReady
,如果为false,则立即返回
// inside component
getInitialState() {
return { waypointReady : false }
}
componentDidMount() {
this.refs.messages.scrollTop = this.refs.messages.scrollHeight;
this.setState({ waypointReady : true});
}
activateWayPoint() {
if (! this.state.waypointReady) return;
// Your code here!
// ...
}
您可能需要在渲染
函数中绑定此
:
// ...
<Waypoint onEnter={this.activateWayPoint.bind(this)}/>
// ...
这假设您的组件在每次setState
时都会重新渲染,也就是This.refs.messages.scrollTop=This.refs.messages.scrollHeight
确保滚动保持在底部的正确方法?@Kunkka它不确保滚动保持在底部(当然,因为您想要滚动!),但是是的,这就是我建议滚动到底部的方式。
// ...
<Waypoint onEnter={this.activateWayPoint.bind(this)}/>
// ...
// ...
<Waypoint onEnter={
this.state.waypointReady ?
this.activateWayPoint :
null
}/>
// ...