web-dev-qa-db-fra.com

React js fait un en-tête commun

Suis nouveau pour réagir js, j'ai besoin de faire un en-tête commun et je dois changer de titre en fonction des changements de route. Dois-je créer un fichier header.jsx et l'importer? ou bien comment rendre l'en-tête (fichier commun) avec route? Ma partie de routage ressemble à ceci.

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>
));
reactjsreact-nativereact-router
12
sibi

Cela devrait fonctionner:

header.jsx:

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

first-page.jsx:

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

second-page.jsx

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

app.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>
);
24
lalkmim

essayez ceci 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>
);};
2
SoPhat Vathana

Donc, si vous devez afficher un en-tête commun parmi vos itinéraires, il existe plusieurs façons de le faire. La première est que vous pouvez définir votre en-tête à l'intérieur de son propre composant. Quelque chose de simple par exemple:

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

Ensuite, dans votre composant home, composant app, etc. Placez simplement à l'intérieur de votre render (), après l'avoir importé en haut de chaque fichier.

L'autre option consiste à créer votre propre sorte de composant conteneur, en utilisant toujours le composant En-tête que nous avons défini ci-dessus:

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

Ensuite, où vous déclarez vos itinéraires:

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>
));

Certes, je n'ai pas essayé cette deuxième option. Vous devrez peut-être passer le routeur en tant que paramètre du composant conteneur à son utilisation du composant enfants, si vous voulez faire des choses comme router.transitionTo('/path').

C'est juste une option si vous ne voulez pas répéter partout.

1
agmcleod