Wie zu enthüllen, Reagieren Komponente auf Blättern

Habe ich einen Reagieren Komponente für eine Feste nav, ich möchte verborgen bleiben, bis ich scrollen an einem bestimmten Punkt auf der Seite, dann in die Ansicht gezogen. Medium hat ein header-ähnlich zu dem, was ich beschrieben habe.

Dies ist eine relativ triviale Aufgabe in jQuery, mit scrollmagic oder Wegpunkte, aber gibt es eine idiomatische Weise, dies zu erreichen mit Reagieren und Vanille JS?

InformationsquelleAutor Wilhelm | 2016-06-30

  1. 10

    Reagieren, Weg mit vanilla JS jsfiddle;

    vergessen Sie nicht, entfernen EventListener. In diesem Beispiel die Komponente gerendert wird, wenn es nur nötig ist,

    class TopBar extends React.Component {
    state = { isHide: false };

    hideBar = () => {
       const { isHide } = this.state

       window.scrollY > this.prev ?
       !isHide && this.setState({ isHide: true })
       :
       isHide && this.setState({ isHide: false });

       this.prev = window.scrollY;
    }

    componentDidMount(){
        window.addEventListener('scroll', this.hideBar);
    }

    componentWillUnmount(){
         window.removeEventListener('scroll', this.hideBar);
    }

    render(){
        const classHide = this.state.isHide ? 'hide' : '';
        return <div className={`topbar ${classHide}`}>topbar</div>;
    }
}

    InformationsquelleAutor Kokovin Vladislav

  2. 8

    Könnten Sie eine Komponente, wie reagieren-headroom zu tun, die schweres heben für Sie. Oder, Sie können immer noch Wegpunkte in Reagieren, indem es bis in die componentDidMount Lebenszyklus-Methode und entfernen Sie es mithilfe componentWillUnmount.

    InformationsquelleAutor Peteris Bikis

  3. 0

    In der componentDidMount lifecycle-Haken, tun die gleiche Sache wie in den jQuery-link, den Sie gegeben haben:

    class Navbar extends React.component {

  let delta = 5;

  render() {
    return (
      <div ref=header></div>
    );
  }

  componentDidMount() {
    $(window).scroll(function(event){
      var st = $(this).scrollTop();

      if(Math.abs(this.state.lastScrollTop - st) <= delta)
        return;

      if (st > lastScrollTop){
        //downscroll code
        //$(this.refs.header).css('visibility','hidden').hover ()
        this.setState({
          navbarVisible: false
        });
      } else {
        //upscroll code
        $(this.refs.header).css('visibility','visible');
        this.setState({
          navbarVisible: true
        });
      }
      lastScrollTop = st;
    }.bind(this));

  }
}
    Ich sehe, Sie sind sehr scharf auf den anderen zu helfen, mit Reagieren, aber könnten Sie bitte etwas Zeit nehmen, um jedes format zu beantworten? Es ist nicht ein Rennen oder eine Menge Spiel, es geht um Qualität. Formatierung der code-Schnipsel richtig und die überprüfung der Zeichensetzung ist nicht so schwer 🙂
    Ok sir Wird sich darum kümmern, Dies ist die ich bin versucht zu verbessern ,ich weiß es
    Dies ist eine große Antwort, aber leider bin ich nicht mit jQuery auf dieses Projekt und suchte nach einem Weg, dies zu erreichen mit nur Reagieren und Vanille JS.
    dann ist u nur noch anfügen, navigieren Sie zu windows-Fenster.addEventListener('scroll',function(){//do stuff})
    Ich würde nicht empfehlen die Verwendung von jQuery im inneren Reagieren Komponenten

    InformationsquelleAutor Piyush.kapoor

  4. 0

    Erstellte ich eine react-Komponente für das exakt gleiche Bedürfnis, wie ich konnte nicht finden alle anderen Implementierungen, die abgestimmt, was ich brauchte. Auch react-headroom wusste nicht geben Ihnen etwas, das würde einfach scrollen Sie nach erreichen einer bestimmten Stelle auf der Seite.

    Die Kernaussage ist hier: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

    Ich sehe keinen Grund, um die Komponente zu kopieren code hier. Der code ist weitgehend aus der react-headroom code, der aber nicht weniger und ist daher einfacher.

    Die Komponente ist das erste Stück code, können Sie einfach kopieren/einfügen importieren es dann. Nach dem Import der code mit der navbar würde wie folgt Aussehen:

    class MyScrollInNavBar extends Component {
    render() {
      return (
        <ScrollInNav scrollInHeight={150}>
          <MyNavBar />
        </ScrollInNav>
      );
    }
}

    InformationsquelleAutor brthornbury

Schreibe einen Kommentar