Scrollen zu einer benutzerdefinierten Komponente

Question

Ich versuche, zu der Position einer benutzerdefinierten Komponente zu scrollen, aber der Verweis darauf gibt keinen gültigen HTML-Knoten zurück. Die Methode "goToContactUs" sollte die Aktion ausführen. Was wäre der beste Weg, dies zu tun?

class Help extends Component { 
    constructor() { 
     super(); 

     this.goToContactUs = this.goToContactUs.bind(this); 
    } 

    goToContactUs() { 
     this.contactUs.scrollIntoView(); 
    } 

    render() { 
     return (
      <div> 
       <ToggleContainer 
        title={this.props.strings['Contact Us']} 
        show={this.props.help.showContactUs} 
        toggle={this.contactUsHandler} 
        ref={(div) => { this.contactUs = div }} 
       > 
        <ContactUs sendEmail={this.props.sendEmail} emailSuccess={this.props.help.emailSuccess} /> 
       </ToggleContainer>     
      </div> 
     ); 
    } 
} 

Answer 1

Sie wollen die scrollTop der ToggleContainer ändern die Spitze des ContactUs zu sein.

Da ContactUs eine Instanz dieses Elements sein wird, können Sie findDOMNode verwenden, um seine Knotendarstellung abzurufen.

import { findDOMNode } from 'react-dom'; 

class Help extends Component { 
    // ... omitted 
    scrollToContact() { 
    const yPos = findDOMNode(this.contact).offsetTop; 
    this.container.scrollTop = yPos; 
    } 

    contact = null; 
    container = null; 

    render() { 
    return (<div> 
     <ToggleContainer 
     title={this.props.strings['Contact Us']} 
     show={this.props.help.showContactUs} 
     toggle={this.contactUsHandler} 
     ref={container => this.container = container} 
     > 
     <ContactUs 
      ref={contact => this.contact = contact} 
      sendEmail={this.props.sendEmail} 
      emailSuccess={this.props.help.emailSuccess} 
     /> 
    </ToggleContainer>     
    </div>); 
    } 
}