カスタムコンポーネントにスクロールする

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