Wie scroll-Komponente auf der Unterseite, reagieren

Ich versuche zu lösen Art von einfaches problem: wenn die Komponente geladen wird, muss ich scrollen Sie nach unten. Aber ich habe verschwendet Tonne von Stunden zu versuchen, es zu lösen. Ich habe versucht, eine Menge von verschiedenen Möglichkeiten (scrollIntoView, scrollTop, scrollBy, etc…), aber keiner von Ihnen kann es nicht tun. Url unten ist ein link zu hantieren, wo ich eine einfache Komponente und ich muss die Nachricht angezeigt werden soll. Das problem ist, dass ich scrollen, etwa 10 Pixel von mir. Ich wäre wirklich dankbar, wenn Sie mir helfen, dieses problem zu lösen.

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

InformationsquelleAutor th1rt3nth | 2017-01-11

 

3 Replies
  1. 2

    Platziert Sie die ref Attribut auf dem falschen Platz.

    Verschieben Sie eine Ebene, um zu fangen, die gesamte Komponente, einschließlich der „Nachricht“ text.

    So, grundsätzlich:

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

    Hier ein arbeiten jsfiddle demo, entstanden aus Ihnen.

  2. 0
      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>
        )
      }
    }    
  3. -1

    Sollten Sie scrollen, nur wenn die Komponente in DOM geladen ist gefüllt mit allen Requisiten.

    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 {....}
       }
    }
    • Dass nicht die Haupt-problem, dargestellt an der Frage. Die Frage ist, warum es nicht nach unten scrollen, um die „Nachricht“ text.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.