사용자 지정 구성 요소로 스크롤

Question

사용자 지정 구성 요소의 위치로 스크롤하려고했지만 올바른 html 노드를 반환하지 않습니다. "goToContactUs"메서드는 작업을 수행해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

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

당신은 ContactUs의 상부가되도록 ToggleContainer의 scrollTop을 변경하고 싶습니다.

ContactUs은 해당 요소의 인스턴스가되므로 findDOMNode을 사용하여 노드 표현을 가져올 수 있습니다.

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>); 
    } 
}