Question

我试图解决一些简单的问题：当加载组件时，我需要将其滚动到底部。但是，我已经浪费了大量时间来解决它。我尝试了很多不同的方法（scrollIntoView，scrollTop，scrollBy等等），但是没有人能做到。下面的url是一个链接到小提琴，我有一个简单的组件，我需要显示消息。问题是我必须自己滚动大约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属性放在错误的位置。

向上移动一级以捕获整个组件，包括＆＃34;消息＆＃34;文本。

所以，基本上：

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

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

这里是working jsfiddle demo，与你分开。

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 {....}
   }
}

如何将组件滚动到底部进行反应

3 个答案: