2016-12-06 2 views
0

Wie mehrere Seiten erstellen, in dem Kopf- und Fußzeile wird statisch und innen Inhalt Bild sein, etc Text aus .json Datei reagieren Sie sich mit der geholt wird und reagieren Routererstellen mehrere Seiten Router mit json reagieren reagieren

ich habe bereits so etwas wie dies

import React, { PropTypes } from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Contact.css'; 

const title = 'Contact Us'; 

function Contact(props, context) { 
    context.setTitle(title); 
    return (
    <div className={s.root}> 
     <div className={s.container}> 
     <h1>{title}</h1> 
     <p>...</p> 
     </div> 
    </div> 
); 
} 

Contact.contextTypes = { setTitle: PropTypes.func.isRequired }; 

export default withStyles(s)(Contact); 

mag ich, dass .json Dateiinhalt Wert innerhalb ersetzen {}

+1

Willkommen bei Stackoverflow. Bitte lies diese Links, um deine Frage zu verbessern: [Tour] (http://stackoverflow.com/tour) | [Wie zu fragen] (http://stackoverflow.com/help/how-to-ask) | [Minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) – Tom

Antwort

0

der Link unten, um ein gutes Beispiel für verschachtelte Navigation bietet.

https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteConfiguration.md

Wenn man sich die Routing-Konfiguration in diesem Beispiel sehen, sehen Sie, dass die wiedergegebenen Komponenten verschachtelt sind.

render((
    <Router> 
    <Route path="/" component={App}> 
     <Route path="about" component={About} /> 
     <Route path="inbox" component={Inbox}> 
     <Route path="messages/:id" component={Message} /> 
     </Route> 
    </Route> 
    </Router> 
), document.body) 

Die about und inbox Routen wird sichergestellt, dass die Komponente an die Wurzelkomponente (/) als props.children übergeben wird, die wie folgt verwendet werden kann:

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/inbox">Inbox</Link></li> 
     </ul> 
     {this.props.children} 
     </div> 
    ) 
    } 
}) 

In diesem Beispiel können Sie die sehen können App Komponente als Ihre Root-Komponente, die immer gerendert wird, so würde dies der am besten geeignete Ort für eine Kopf- und Fußzeile sein.