прокрутите в поле зрения после пуска в реакции

Question

Как прокрутить вид после маршрутизации в реакции

Мы используем реагирующий маршрутизатор. Чего я хочу добиться, так это прокрутить вид на один из компонентов после реакции на эту страницу.

Answer 1

Вот краткий пример использования react-router-dom и refs.Вы не предоставили нам код для просмотра, поэтому рассмотрите этот шаблон.:)

Также вот ваша песочница для справки: https://codesandbox.io/s/adoring-surf-h55ci

Итак, скажем, ваши маршруты настроены так:

Маршруты

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/example" component={Example} />
      </div>
    </BrowserRouter>
  );
}

Таким образом, пользователь начинает с Home "/"

import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
  return <Link to="/example">Go To Example</Link>;
};

export default Home;

Они нажимают на link, и он переводит их на маршрут /example, рендеринг Пример

import React from "react";
import Section from "./Section";

class Example extends React.Component {
  componentDidMount() {
    if (this.mySection.current) {
      this.mySection.current.scrollIntoView({
        behavior: "smooth",
        nearest: "block"
      });
    }
  }

  mySection = React.createRef();

  render() {
    return (
      <div>
        <div style={{ background: "orange", height: "750px" }}>
          This is an example, below is my component.
        </div>
        <div ref={this.mySection}>
          <Section />
        </div>
      </div>
    );
  }
}

export default Example;

Пример состоит из двух частей: div с простым текстом и компонент * Section.Как вы заметили, мы завернули компонент Section в div и дали ему ref prop.ref позволяет нам общаться с этим div-оберткой.В componentDidMount() мы просто прокручиваем до этого деления.

Answer 2

Один из способов прокрутки к компоненту - установить ссылку на компонент, к которому вы хотите прокрутить: https://reactjs.org/docs/refs-and-the-dom.html

После того, как вы поместите ссылку на компонент, вы можете затем прокрутить до ссылки в componentDidMount() родительского компонента, что-то вроде:

window.scrollTo(0, this.myRef.current.offsetTop)

Возможно, вам нужно быть немного более оборонительным и сделать что-то вроде этого:

this.myRef && window.scrollTo(0, this.myRef.current.this.myRef)

Таким образом, при посещении маршрута компонент прокручивается до его offsetTop

.