Blättern Sie mit einem Klick auf die Seite zur verschachtelten React-Komponente
Eugene
Ich habe eine Reaktionskomponente mit mehreren verschachtelten Komponenten. Für die Seitennavigation habe ich oben einige Schaltflächen. Die Frage ist, wie die Seite zur verschachtelten Reaktionskomponente gescrollt werden kann, wenn auf eine bestimmte Schaltfläche geklickt wird. Ist dies ohne Verwendung von jquery libs möglich?
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>
);
}
Lyubomir
Verwenden Sie scrollIntoView , um zum Element und den Refs von React zu scrollen , um das DOM Ihrer Komponente abzurufen .
Hier ist ein kleines Beispiel, das zeigt, 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')
);