javascript - 滚动到自定义组件

我试图滚动到自定义组件的位置，但对它的引用未返回有效的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>
        );
    }
}

最佳答案

您想要将scrollTop的ToggleContainer更改为ContactUs的顶部。

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

关于javascript - 滚动到自定义组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41188133/