Автоматический переход к элементу div, созданному в React Virtual Dom

Question

Моя веб-страница использует компоненты React. У функции рендеринга одного из ее компонентов div элементы, которые выглядят так:

<div id='myid'>
  {/* ... */}
</div>

используются. После перезагрузки страницы нам нужно перейти к одному из этих элементов. Например, после перезагрузки этой страницы нам может автоматически понадобиться перейти к элементу <div> с идентификатором, равным myid. Обратите внимание, что <div> находится в виртуальном DOM React, поэтому такие функции, как document.getElementById, могут не работать (как это происходит со мной). Возможно ли это?

Answer 1

Вы все еще можете получить элемент, используя findDOMNode

const div = ReactDOM.findDOMNode(this.refs.mydiv);

Затем в функции рендеринга

<div ref="mydiv"></div>

И наконец

window.scrollTo(0, div.offsetTop);

Answer 2

Если элемент визуализируется по реакции, вы должны использовать ref, чтобы заставить элемент вызывать scrollIntoView():

class MyComponent extends Component {
    ref = elem => elem.scrollIntoView();

    render() {
        return (
            <div ref={this.ref}>{/* ... */}</div>
        );
    }
}

Использование getElementById() или React.findDOMNode также может работать, но есть проблема, о которой вам нужно знать, если компонент уже смонтирован. Если вы выполняете прокрутку внутри компонента (что рекомендуется), используйте ref - это лучшее решение.

Answer 3

<div> и id окажутся в документе при монтировании компонента, так что вы можете прокрутить их там в хуке componentDidMount.

Пример

class App extends React.Component {
  componentDidMount() {
    document.getElementById("myid").scrollIntoView();
  }
  render() {
    return (
      <div>
        <div style={{ height: 1000 }}>Hello CodeSandbox</div>
        <div style={{ height: 1000 }} id="myid">
          Scroll here
        </div>
      </div>
    );
  }
}