Reagieren js tun gemeinsame Kopfzeile

Question

Ich bin neu zu reagieren js, ich muss Kopfzeile gemeinsam tun und müssen Titel entsprechend der Route ändern. Muss ich die Datei header.jsx erstellen und importieren? oder sonst, wie man die Überschrift (allgemeine Akte) mit Weg rendert? Mein Routing-Teil sieht so aus.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 
import Home from './Home.jsx'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'; 

ReactDOM.render((
    <Router history = {browserHistory}> 
     <Route path = "/home" component = {Home} /> 
     <Route path = "/" component = {App}> 
     </Route> 
    </Router> 
)); 

Answer 1

sollte diese Arbeit. jsx:

import Header from './header.jsx'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

web-app.jsx:

import App from './app.jsx'; 
import FirstPage from './first-page.jsx'; 
import SecondPage from './second-page.jsx'; 

ReactDOM.render(
    <Router history = {browserHistory}> 
    <Route path = "/" component = {App}> 
     <Route path = "/first" component = {FirstPage}> 
     <Route path = "/second" component = {SecondPage}> 
    </Route> 
    </Router> 
); 

Answer 2

versuchen diese https://www.npmjs.com/package/react-helmet

import React from "react"; 
import Helmet from "react-helmet"; 

export default function Application() { 
return (
    <div className="application"> 
     <Helmet title="My Title" /> 
     ... 
    </div> 
);}; 

Answer 3

Wenn Sie also einen gemeinsamen Header unter Ihren Routen angezeigt werden müssen, gibt es ein paar Möglichkeiten, ist, es zu tun. Zum einen können Sie Ihre Kopfzeile in einer eigenen Komponente definieren. Etwas Einfaches Beispiel:

import React from 'react'; 
export default React.createClass({ 
    render() { 
    return <div className='header'><h1>{this.props.title}</h1></div>; 
    } 
} 

Dann in Ihrem Hause Komponente, App Komponente usw. Einfach ausgedrückt in Ihrem render(), nachdem es an der Spitze jeder Datei importieren.

Die andere Option ist Ihre eigene Art von Container-Komponente zu erstellen, noch die Header-Komponente wir oben definiert:

import React from 'react'; 
export default React.createClass({ 
    render() { 
    return (
     <div className='container'> 
     <Header title={this.props.title} /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

Dann, wo Sie Ihre Routen erklären:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 
import Home from './Home.jsx'; 
import Container from './Container.jsx'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'; 

ReactDOM.render((
    <Router history = {browserHistory}> 
     <Route path = "/home" component = {<Container title='home'><Home /></Container>} /> 
     <Route path = "/" component = {<Container title='app'><App /></Container>}> 
     </Route> 
    </Router> 
)); 

ich habe Zugegeben nicht diese zweite Option ausprobiert. Möglicherweise müssen Sie den Router als Parameter von der Containerkomponente an die Verwendung der untergeordneten Komponente weitergeben, wenn Sie beispielsweise router.transitionTo('/path') ausführen möchten.

Es ist nur eine Option, wenn Sie nicht überall wiederholen möchten.

header.jsx:

class Header extends Component { 
    render() { 
    return (<div>Your header</div>); 
    } 
} 

erster page.jsx:

class FirstPage extends Component { 
    render() { 
    return (<div>First page body</div>); 
    } 
} 

zweit page.jsx

class SecondPage extends Component { 
    render() { 
    return (<div>Second page body</div>); 
    } 
} 

App