web-dev-qa-db-ja.com

React js do common header

Jsをリアクションするのは初めてです。ヘッダーの共通化を行い、ルートの変更に応じてタイトルを変更する必要があります。 header.jsxファイルを作成してインポートする必要がありますか？または、ルートでヘッダー（共通ファイル）をレンダリングする方法は？ルーティング部分は次のようになります。

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

これは動作するはずです：

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

これを試してください 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

したがって、ルート間で共通のヘッダーを表示する必要がある場合は、いくつかの方法があります。 1つは、独自のコンポーネント内でヘッダーを定義できることです。たとえば、簡単なもの：

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

次に、ホームコンポーネント、アプリコンポーネントなどで、各ファイルの先頭にインポートした後、単にrender（）内に配置します。

もう1つのオプションは、上記で定義したヘッダーコンポーネントを引き続き使用して、独自の種類のコンテナーコンポーネントを作成することです。

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

次に、ルートを宣言する場所：

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

確かに、私はその2番目のオプションを試したことはありません。 router.transitionTo('/path')のようなことをしたい場合、ルーターをコンテナコンポーネントから子コンポーネントの使用までパラメータとして渡す必要があるかもしれません。

どこでも繰り返したくない場合は、単なるオプションです。

1
agmcleod