如何将组件滚动到底部

Question

我正在尝试解决一种简单的问题：加载组件时，需要将其滚动到底部。 但是我已经浪费了很多时间试图解决它。 我尝试了很多不同的方式（scrollIntoView，scrollTop，scrollBy等），但是没有一种方法不能做到。 下面的网址是小提琴的链接，其中我有一个简单的组件，我需要显示Message。 问题是我必须自己滚动约10个像素。 如果您能帮助我解决这个问题，我将不胜感激。

class Hello extends React.Component {
  componentDidMount() {
    const elem = ReactDOM.findDOMNode(this.refs.test);

    if (elem) {
      elem.scrollIntoView(false);
    }
  }

  render() {
    return (
      <div>
        <div className="test" 
             ref="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

JSFiddle

Answer 1

您将ref属性放在错误的位置。

将其上移一级以捕获整个组件，包括“消息”文本。

因此，基本上：

class Hello extends React.Component {
  // ...

  render() {
    return (
      <div ref="test">
        <div className="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}

这是一个工作正常的jsfiddle演示 ，从您的演示中派生而来。

Answer 2

  class Hello extends React.Component {
  // ...

  componentDidUpdate() {
    this.scrollDiv.scrollIntoView(false);
  }

  render() {
    return (
      <div
        ref={(el) => {this.scrollDiv = el}}
      >
        <div className="test">
             Hello {this.props.name}
        </div>
        <div>Message</div>
      </div>
    )
  }
}    

Answer 3

仅当将组件加载到包含所有道具的DOM中时，才应滚动。

export default class Hello extends React.Component {
  constructor(props,context){
    super(props,context);
    this.isAlreadyLoaded =  false;
   }

componentWillReceiveProps(nextProps) {
    let scrollToElement = document.getElementById("scroll-element");
    if (scrollToElement && !isAlreadyLoaded){
        this.isAlreadyLoaded = true;
        scrollToElement.scrollIntoView(true);
    }
  }

   render(){
      return {....}
   }
}