React.js und Scrolling SPA

Ich beginne meine Reise react.js, und mein Ziel ist es, eine einzelne Seite Anwendung zu erstellen, wo die oberen Navigationslinks zum entsprechenden Abschnitt auf der Titelseite wie THIS SITE scrollen.React.js und Scrolling SPA

Bis jetzt implementiert Meine Anwendung React.js und React-Router und Nester die Link-Komponenten innerhalb der Titelseite. Womit ich mich abmühen muss, ist die korrekte Implementierung, um diesen Code zu ändern, um das im obigen Link gezeigte Ergebnis zu erhalten. Es gibt viele SPA Tutorials, aber ich muss noch eine aktuelle finden, die mein spezielles Szenario mit React.js + React-Router anspricht. Würde jemand einen sauberen Weg kennen, dies zu tun? oder vielleicht ein aktuelles Tutorial, das einen durch den Prozess führt?

Im Folgenden werde ich einige relevante Code auflisten, um die Antworten für eine Lösung (oder Empfehlung) zu helfen. Ich danke Ihnen im Voraus für alle Antworten, die ich erhalte.

Sehr respekt, Kama

Client.js

const app = document.getElementById('app'); 
ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Layout}> 
      <IndexRoute component={Home} /> 
      <Route path="AboutUs" component={AboutUs}></Route> 
      <Route path="OurMission" component={OurMission}></Route> 
     </Route> 

    </Router>, 

    app);

Layout.js

export default class Layout extends React.Component { 

    render() { 
    const { location } = this.props; 
    return (
     <div> 
     <Nav location={location}/> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-lg-12"> 
     <Header /> 
      {this.props.children} 
      </div> 
      </div> 
      <Footer /> 
     </div> 
     </div> 
    ); 
    } 
}

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Haki</title> 
    <!-- Bootstrap Core CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> 

    </head> 

    <body> 
    <div id="app"></div> 
    <script src="client.min.js"></script> 
    </body> 
</html>

Quelle

2016-05-27 Robbie Robinson

Es gibt eine coole Lib, mit der Sie die Position von Komponenten verfolgen können (https://github.com/gilbox/react-track). Was ist dein Argument für die Verwendung eines Routers? Könnten Sie nicht einfach Knöpfe haben, die, wenn Sie darauf klicken, die Lib benutzen, die ich verlinkt habe, und dann einen Bildlauf zum entsprechenden Ort machen? Oder Sie könnten die guten alten nativen Anchor-Tags in Betracht ziehen: D – ctrlplusb

So folgte ich This Tutorial, um Navigationslinks zu anderen Teilen der Seite zu erhalten. Statt this.props.children der Verwendung der Komponenten an die layout.js-Datei übergeben, ich habe gerade jede der Komponenten habe ich auf der einzelnen Seite wollen wie unten:

return (
     <div > 
     <Nav location={location}/> 
     <div class="container" style={layoutStyle}> 
      <div class="row"> 
      <div class="col-lg-12"> 
     <Header /> 
      <Home /> 
      <Mission /> 
      <AboutUs /> 
      </div> 
      </div> 

     </div> 
      <Footer /> 
     </div> 
    );

Als nächstes änderte ich die Navigationsleiste Links von react-router Links zu Ankern, wie das Tutorial erklärt.

Um reibungsloses Scrollen zu erhalten, habe ich die gefundene Javascript-Datei HERE verwendet.

Quelle

2016-05-31 20:07:26

React.js und Scrolling SPA

Antwort

Verwandte Themen