स्क्रॉल स्थिति सेट प्रतिक्रिया से पहले घटक

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 नामक लाइब्रेरी का उपयोग कर रहा हूं जो मुझे चैट संदेशों को कम करने में मदद करेगा। जब भी मैं कंटेनर के शीर्ष पर हूं, यह हर बार ट्रिगर हो जाता है।

दुखी परिणाम यह है कि संदेश बॉक्स शीर्ष पर शुरू में शीर्ष पर शुरू होता है, तो मार्ग बिंदु हमेशा माउंट पर ट्रिगर हो जाता है।

मेरे सवाल यह है कि मैं के रूप में शीर्ष शुरू करने और शुरुआत

पर नीचे करने के लिए जा रहा है कि मैं इस

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

कर की कोशिश की करने के लिए विरोध नीचे की स्थिति में शुरू करने के लिए संदेश घटक मजबूर कर सकते हैं है समस्या यह है कि मैं घटक माउंट से पहले refs तक पहुंच नहीं है। क्या कोई और तरीका है?

Answer 1

सेट करने से पहले आप this.activateWayPoint को फायरिंग से बचने के लिए क्या चाहते हैं।

आप प्रारंभ में एक राज्य चर waypointReady से false सेट करके ऐसा कर सकते हैं। इसे componentDidMount में सत्य पर सेट करें।

फिर, आप को 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! 
    // ... 
} 

आप शायद अपने render समारोह अंदर this बाध्य करने के लिए करना होगा: बजाय this.activateWayPoint अंदर जांच करने का

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

वैकल्पिक रूप से, आप चेक प्रदर्शन कर सकते हैं अंदर प्रस्तुत करना:

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

यह मानता है कि आपका घटक हर बार setState पर फिर से प्रस्तुत करता है।