我有下面的 react 组件,它本质上是一个聊天框
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>
)
}
我遇到的问题是聊天消息框从容器的最顶部开始(滚动位置从顶部开始)。我希望滚动位置像普通聊天室一样位于底部。
所以我尝试这样做:
componentDidMount(){
this.refs.messages.scrollTop = this.refs.messages.scrollHeight
}
这在组件安装后触发,即 - 消息框滚动位置最初从顶部开始,并在渲染时强制其到达底部。
这通常没问题,但我正在使用一个名为 react-waypoint
的库,它可以帮助我对聊天消息进行分页。每次我在容器顶部时都会触发。
令人不快的结果是,因为消息框最初在装载时从顶部开始,所以路径点也总是在装载时被触发。
我的问题是我是否可以强制消息组件从底部开始,而不是从顶部开始然后到底部
我试过这样做
componentWillMount(){
this.refs.messages.scrollTop = this.refs.messages.scrollHeight
}
问题是在组件安装之前我无法访问引用。还有其他办法吗?
最佳答案
您想要的是在设置 scrollTop
之前避免触发 this.activateWayPoint
。
您可以通过将状态变量 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!
// ...
}
您可能必须在 render
函数中绑定(bind) this
:
// ...
<Waypoint onEnter={this.activateWayPoint.bind(this)}/>
// ...
或者,您可以在 render 中执行检查,而不是在 this.activateWayPoint
中执行检查:
// ...
<Waypoint onEnter={
this.state.waypointReady ?
this.activateWayPoint :
null
}/>
// ...
这假设每次您 setState
时您的组件都会重新呈现。
关于javascript - 在组件安装之前 react 设置滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38638303/