React js 做通用标头 [英] React js do common header

问题描述

我是 ReactJS 的新手.我需要有一个共同的标题并根据路线变化更改标题.我需要创建一个 header.jsx 文件并导入它吗?否则，如何使用路由渲染标题(公共文件)?

我的路由部分如下所示:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App.jsx'导入应用程序；从'./Home.jsx'导入主页；import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';ReactDOM.render((<路由器历史记录 = {browserHistory}><路由路径=/home"组件={Home}/><路由路径=/"组件={App}></路线></路由器>));

解决方案

这应该有效:

header.jsx:

class Header extends Component {使成为() {return (<div>你的标题</div>);}}

第一页.jsx:

class FirstPage 扩展组件 {使成为() {return (<div>首页正文</div>);}}

第二页.jsx

class SecondPage 扩展组件 {使成为() {return (<div>第二页正文</div>);}}

app.jsx:

import Header from './header.jsx';类 App 扩展组件 {使成为() {返回 (<div><标题/>{this.props.children}

);}}

web-app.jsx:

从'./app.jsx'导入应用程序；从'./first-page.jsx'导入第一页；从'./second-page.jsx'导入SecondPage；ReactDOM.render(<路由器历史记录 = {browserHistory}><路由路径=/"组件={App}><路由路径=/first"组件={FirstPage}><路由路径=/second"组件={SecondPage}></路线></路由器>);

I am new to ReactJS. I need to have a common header and change title according to the route changes. Do I need to create a header.jsx file and import it? Or else, how can I render the header (common file) with route?

My routing part looks like this:

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

解决方案

This should work:

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

这篇关于React js 做通用标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！