Прокрутите страницу до вложенного компонента React нажатием кнопки

Question

У меня есть компонент React с несколькими вложенными компонентами. Для навигации по страницам у меня есть несколько кнопок сверху. Вопрос в том, как прокручивать страницу до вложенного реагирующего компонента при нажатии на определенную кнопку, можно ли это сделать без использования 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> 
    ); 
    } 

Answer 1

Используйте scrollIntoView, чтобы прокрутить список до элемента и выполнить команду React's refs, чтобы получить DOM вашего компонента.

Here - небольшой пример, который иллюстрирует то, что вы хотите сделать.

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

Вы пытались использовать якорь?

Поместите атрибут id ('myTarget') в целевой компонент и замените кнопку ссылкой (href: '#mytarget').

Это, к сожалению, не работает с фиксированными заголовками.

Answer 3

Если вам нужно осуществить это самостоятельно, вы можете использовать react-scroll

Их demo довольно много, что вам нужно.