React установить прокрутки позиции перед компонентом крепления

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, и немедленно верните его, если он является ложным.

// 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, вы можете выполнить проверку в визуализации:

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

Предполагается, что ваш компонент повторно отображает каждый раз, когда вы setState.