I've got a React Component with several nested components. For page navigation I have a few buttons on the top. The question is, how to scroll the page to the nested react component when a certain button is clicked, is it possible to do so without using jquery libs?
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>
);
}
Use scrollIntoView to scroll down to the element and React's refs to get the DOM of your component.
Here is a small example that illustrates what you want to do.
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')
);
Have you tried using an anchor?
Put an id attribute ('myTarget') to your target component and replace the button with a link (href: '#mytarget').
This does not work with fixed headers, unfortunately.
If you are using typescript.
import * as React from 'react';
class Hello extends React.Component<{}> {
private helloRef = React.createRef<HTMLDivElement>();
public render() {
return (
<div ref={this.helloRef}>Hello</div>
<button onClick={() => {
if (this.helloRef && this.helloRef.current) {
this.helloRef.current.scrollIntoView();
}
}
}>Button1</button>
);
}
}