Tengo un componente React con varios componentes anidados. Para navegar por la página, tengo algunos botones en la parte superior. La pregunta es, cómo desplazar la página al componente de reacción anidado cuando se hace clic en un botón determinado, ¿es posible hacerlo sin usar 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 para desplazarse hacia abajo hasta el elemento y las referencias de React para obtener el DOM de su componente.
Aquí hay un pequeño ejemplo que ilustra lo que quieres hacer.
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') );¿Has probado a usar un ancla?
Coloque un atributo de identificación ('myTarget') en su componente de destino y reemplace el botón con un enlace (href: '#mytarget').
Desafortunadamente, esto no funciona con encabezados fijos.
Si está utilizando mecanografiado.
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> ); } }