在组件安装之前反应设置滚动位置

Question

我有下面的反应组件,它本质上是一个聊天框

 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,可以帮助我分页聊天消息.每当我在容器的顶部时,这就会被触发.

不愉快的后果是,因为消息框最初在mount时从顶部开始,所以路由点也总是在mount上被触发.

我的问题是我是否可以强制消息组件从底部位置开始,而不是从头开始并在开始时到达底部

我试过这样做

  componentWillMount(){
    this.refs.messages.scrollTop = this.refs.messages.scrollHeight
  }

问题是我没有在组件安装之前访问refs.还有其他方法吗？

Answer 1

你想要的是this.activateWayPoint在你设定之前避免射击scrollTop.

您可以通过将状态变量设置waypointReady为false最初来完成此操作.将其设置为true componentDidMount.

然后,您可以修改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!
  // ...
}

你可能必须绑定this你的render函数:

// ...
<Waypoint onEnter={this.activateWayPoint.bind(this)}/>
// ...

或者,this.activateWayPoint您可以在render 内部执行检查,而不是在内部执行检查:

// ...
<Waypoint onEnter={
   this.state.waypointReady ?
   this.activateWayPoint :
   null
   }/>
// ...

这假定您的组件每次都重新渲染setState.