Blättern Sie Seite zu der geschachtelten React-Komponente auf eine Schaltfläche klicken

Question

Ich habe eine React-Komponente mit mehreren geschachtelten Komponenten. Für die Seitennavigation habe ich ein paar Knöpfe auf der Oberseite. Die Frage ist, wie man die Seite zu der verschachtelten Reaktionskomponente scrollen kann, wenn eine bestimmte Schaltfläche angeklickt wird, ist es möglich, dies ohne Verwendung von jquery-Bibliotheken zu tun?

render() { 
    return (
     <div> 
     <button onClick={(e) => { console.log('Scrolling to Item 1');}}>Button0</button> 
     <button onClick={(e) => { console.log('Scrolling to Item 2');}}>Button1</button> 
      <Layout> 
      <Item> 
       <Content> 
      ... 
       </Content> 
      </Item> 

      <Item> 
       <Content> 
      ... 
       </Content> 
      </Item> 

      </Layout> 
     } 
     </div> 
    ); 
    } 

Answer 1

Verwenden Sie scrollIntoView, um nach Element und Reacts refs zu scrollen, um das DOM Ihrer Komponente zu erhalten.

Here ist ein kleines Beispiel, das veranschaulicht, was Sie tun möchten.

var Hello = React.createClass({ 
    componentDidMount() { 
    alert("I will scroll now"); 

    this.refs.hello.scrollIntoView(); // scroll... 
    }, 

    render: function() { 
    return <div ref="hello">Hello {this.props.name}</div>; // reference your component 
    } 
}); 

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

Answer 2

Haben Sie versucht, einen Anker zu verwenden?

Setzen Sie ein ID-Attribut ('myTarget') in Ihre Zielkomponente und ersetzen Sie die Schaltfläche durch einen Link (href: '#mytarget').

Dies funktioniert leider nicht mit festen Kopfzeilen.

Answer 3

Sofern Sie es nicht selbst implementieren müssen, können Sie react-scroll

Ihre demo ist ziemlich viel verwenden, was Sie brauchen.