Reakt.js'de oluşturduktan sonra sayfanın üstüne gidin

Hiçbir fikrim yok, nasıl çözeceğim bir problemim var. Tepki bileşenimde uzun bir veri listesi ve altta birkaç bağlantı görüntüler. Bu bağlantılardan herhangi birine tıkladıktan sonra listeyi yeni bağlantı koleksiyonuyla dolduruyorum ve yukarı kaydırmam gerekiyor.

Sorun şu ki - yeni koleksiyon oluşturulduktan sonra nasıl yukarı kaydırılır ?

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;

Sonunda .. kullandım:

componentDidMount() {
  window.scrollTo(0, 0)
}

DÜZENLEME: React v16.8 +

useEffect(() => {
  window.scrollTo(0, 0)
}, [])

Orijinal çözüm, reaksiyonun çok erken bir sürümü için sağlandığından , bir güncelleme:

constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
}

componentDidMount() {
  this.myRef.current.scrollTo(0, 0);
}

render() {
    return <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element

Böyle bir şey kullanabilirsiniz. ReactDom reaksiyon içindir. Sadece başka türlü tepki ver.

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

React 16+ için güncelleme 11/11/2019

  constructor(props) {
    super(props)
    this.childDiv = React.createRef()
  }

  componentDidMount = () => this.handleScroll()

  componentDidUpdate = () => this.handleScroll()

  handleScroll = () => {
    const { index, selected } = this.props
    if (index === selected) {
      setTimeout(() => {
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }

React Routing'de yeni rotaya yönlendirirsek, otomatik olarak sizi sayfanın üstüne götürmeyecek sorunu vardır.

Ben de aynı sorunu yaşadım.

Bileşene tek bir satır ekledim ve tereyağı gibi çalıştı.

componentDidMount() {
    window.scrollTo(0, 0);
}

Bakınız: tepki eğitimi

Bu, refs kullanılarak ele alınabilir ve muhtemelen gerçekleştirilmelidir :

"... ReactDOM.findDOMNode'u bir" kaçış kapağı "olarak kullanabilirsiniz, ancak kapsülleme işlemini bozduğundan ve hemen hemen her durumda kodunuzu React modeli içinde yapılandırmanın daha net bir yolu olduğu için bunu önermiyoruz."

Örnek kod:

class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

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

Bunu yönlendiricide şu şekilde yapabilirsiniz:

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

onUpdate={() => window.scrollTo(0, 0)}Kaydırma üst koydu. Daha fazla bilgi için: kod bağlantısı

Kanca kullananlar için aşağıdaki kod çalışacaktır.

React.useEffect(() => {
  window.scrollTo(0, 0);
}, []);

Not: useEffect'i doğrudan da içe aktarabilirsiniz: import { useEffect } from 'react'

ComponentDidUpdate / ComponentDidMount dosyasını çoğaltmadan pencere kaydırma konumunun sıfırlanmasını istediğiniz bağlı bileşenleri seçmenize izin veren başka bir yaklaşım daha var.

Aşağıdaki örnek Blog bileşenini ScrollIntoView () ile sarmaktadır, böylece Blog bileşeni takıldığında rota değişirse, HOC'nin ComponentDidUpdate penceresi kaydırma konumunu güncelleyecektir.

Herhangi bir rota değişikliğinde, bir pencere sıfırlamasını tetikleyecek şekilde tüm uygulamanın üzerine kolayca sarabilirsiniz.

ScrollIntoView.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';

export default WrappedComponent => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

    render = () => <WrappedComponent {...this.props} />
  }
  return withRouter(ResetWindowScroll);
}

Routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';

 export default (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

Yukarıdaki örnek harika çalışıyor, ancak taşındıysanız react-router-dom, aşağıdakileri oluşturarak yukarıdakileri basitleştirebilirsiniz.HOC taşındıysanız, bileşeni saran .

Bir kez daha, rotalarınız üzerinde kolayca kolayca sarabilirsiniz ( componentDidMountyöntemi, componentDidUpdateyukarıda yazılı yöntem örneği koduna değiştirmenin yanı sıra ScrollIntoView,withRouter ).

konteyner / ScrollIntoView.js

import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

bileşenleri / Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);

Benim için işe yarayan tek şey bu (ES6 sınıfı bileşeniyle):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}

Tepki-yönlendirici dokümanlar açıklanan kod tepki yönlendirici ScrollToTop bileşeni kullanıyorum

https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

Tek Routes dosyasında kodu değiştiriyorum ve bundan sonra her bileşende kod değiştirmeye gerek yok.

Örnek Kod -

Adım 1 - ScrollToTop.js Bileşeni Oluşturun

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

Adım 2 - App.js dosyasına ScrollToTop Component öğesini ekleyin. <Router

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

Kanca çözümü :

• ScrollToTop kancası oluşturma

    import { useEffect } from "react";
    import { withRouter } from "react-router-dom";

    const ScrollToTop = ({ children, location: { pathname } }) => {
      useEffect(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }, [pathname]);

      return children || null;
    };

    export default withRouter(ScrollToTop);

• Uygulamanızı onunla sarın

    <Router>
        <ScrollToTop>
           <App />
        </ScrollToTop>
    </Router>

Belgeler: https://reacttraining.com/react-router/web/guides/scroll-restoration

Sonuç bileşenlerinde bir güncelleme olduğunda bileşen güncellemelerini varsayarak işlevsel bileşenlerde Hooks kullanma

import React, { useEffect } from 'react';

export const scrollTop = ({result}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [result])
}

Yukarıdakilerin hepsi benim için işe yaramadı - neden olduğundan emin değilim:

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

HEADER başlık öğemin kimliği olduğu yerde çalıştı

Eğer tüm yapmak isteyenler burada basit bir şeyse, herkes için işe yarayacak bir çözüm

bu mini işlevi ekle

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

işlevi sayfanın altbilgisinden aşağıdaki gibi çağırın

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

güzel stiller eklemek istiyorsanız css burada

.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

React Hooks kullanıyorum ve yeniden kullanılabilir bir şey değil, aynı zamanda (renderden sonra değil) herhangi bir zamanda arayabileceğim bir şey istedim.

// utils.js
export const useScrollToTop = (initialScrollState = false) => {
  const [scrollToTop, setScrollToTop] = useState(initialScrollState);

  useEffect(() => {
    if (scrollToTop) {
      setScrollToTop(false);
      try {
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
      } catch (error) {
        window.scrollTo(0, 0);
      }
    }
  }, [scrollToTop, setScrollToTop]);

  return setScrollToTop;
};

Ardından kancayı kullanmak için şunları yapabilirsiniz:

import { useScrollToTop } from 'utils';

const MyPage = (props) => {
  // initialise useScrollToTop with true in order to scroll on page load 
  const setScrollToTop = useScrollToTop(true);

  ...

  return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}

Bunu mobil cihazlar için yapıyorsanız , en azından kromla, altta beyaz bir çubuk göreceksiniz.

Bu, URL çubuğu kaybolduğunda olur. Çözüm:

Yükseklik / dk. Yükseklik: % 100 değerini yükseklik / dk . Yükseklik: 100vh olarak değiştirin .

Google Geliştirici Dokümanları

Yukarıdaki cevapların hiçbiri şu anda benim için çalışmıyor. O .scrollTokadar geniş uyumlu değil gibi görünüyor .scrollIntoView.

Bizim App.js olarak, içinde componentWillMount()biz ekledi

this.props.history.listen((location, action) => {
        setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
    })

Bizim için evrensel olarak çalışan tek çözüm budur. kök bizim App kimliğidir. "Düzgün" davranış her tarayıcıda / cihazda çalışmaz. 777 zaman aşımı biraz muhafazakar, ancak her sayfada çok fazla veri yüklüyoruz, bu yüzden test ederek gerekliydi. Çoğu uygulama için daha kısa 237 işe yarayabilir.

Bu konuya, Bağlantısı Erişim Yönlendiricisi'nin üzerine kurulmuş Gatsby ile bir site oluşturmakla karşılaştım. Bunun varsayılan davranıştan ziyade yapılması gereken bir değişiklik olması tuhaf görünüyor.

Her neyse, yukarıdaki çözümlerin çoğunu denedim ve benim için gerçekten işe yarayan tek şey:

document.getElementById("WhateverIdYouWantToScrollTo").scrollIntoView()

Bunu bir useEffect'e koydum, ancak kolaylıkla componentDidMount'a koyabilir veya istediğiniz herhangi bir şekilde tetikleyebilirsiniz.

Window.scrollTo (0, 0) 'in neden benim (ve diğerleri) için işe yaramadığından emin değilim.

Tüm çözümler kaydırmayı eklemek componentDidMountveyacomponentDidUpdate DOM ile DOM ile .

Tüm bunları yaptım ve işe yaramadı.

Yani, benim için iyi çalışan başka bir yol buldum.

componentDidUpdate() { window.scrollTo(0, 0) } Başlığa eklendiğinde , benimki <Switch></Switch>öğenin dışında. Sadece app ücretsiz. İşler.

Ayrıca bazı ScrollRestoration hakkında da buldum şeyleri , ama şimdi tembelim. Ve şimdilik bunu "DidUpdate" yolunda tutacağım.

Umarım yardımcı olur!

dikkatli ol

Bu kod neden olacaktır pürüzsüz bir davranış üzerindeki kaydırma :

<div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

ScrollIntoView () içine diğer parametreleri iletebilirsiniz Aşağıdaki sözdizimi kullanılabilir:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop Optional Bir Boole değeri:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions İsteğe Bağlı Aşağıdaki özelliklere sahip bir Nesnedir :

*behavior* Optional
    Defines the transition animation.
    One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
    One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
    One of "start", "center", "end", or "nearest". Defaults to "nearest".

Daha fazla ayrıntıyı burada bulabilirsiniz: MDN belgeleri

Yukarıdaki cevapların hiçbiri şu anda benim için çalışmıyor. O .scrollTokadar geniş uyumlu değil ki çıkıyor.scrollIntoView.

Bizim App.js olarak, içinde componentWillMount()biz ekledi

    this.props.history.listen((location, action) => {
            setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
        })

Bizim için evrensel olarak çalışan tek çözüm budur. rootbizim App kimliğidir. "Düzgün" davranış her tarayıcıda / cihazda çalışmaz. 777 zaman aşımı biraz muhafazakar, ancak her sayfada çok fazla veri yüklüyoruz, bu yüzden test ederek gerekliydi. Çoğu uygulama için daha kısa 237 işe yarayabilir.

Bir sayfa, kitap başına kitap gibi bir bölüm oluşturduğunuzu varsayarsak, tek yapmanız gereken bunu kodunuza eklemektir. Bu benim için sihir gibi çalıştı.

    componentDidUpdate(prevProps) {
      if (prevProps.currentChapter !== this.props.currentChapter) {
        window.scrollTo(0, 0);
      }
    }

Bu şekilde, oluşturulan bileşen için bir ref oluşturmanıza gerek kalmaz.

Yaptığım şey bu:

...
useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()

       return(
         <div ref={ref}>
           ...
         </div>
        )
...

Kullanabilirsin, bu benim için çalışıyor.

import React, { useEffect } from 'react';

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);

Böyle bir şey benim için bir bileşen üzerinde çalıştı:

<div ref="scroller" style={{height: 500, overflowX: "hidden", overflowY: "auto"}}>
      //Content Here
</div>

Sonra hangi fonksiyon güncellemelerle ilgileniyorsa:

this.refs.scroller.scrollTop=0

Benim için hiçbir şey işe yaramadı ama:

componentDidMount(){

    $( document ).ready(function() {
        window.scrollTo(0,0);
    });
}