React js 做通用标头

IT技术 reactjs react-native react-router
2021-05-23 06:04:16

我是 ReactJS 的新手。我需要有一个共同的标题并根据路线变化更改标题。我需要创建一个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>
));
3个回答

这应该有效:

头文件.jsx:

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

第一页.jsx:

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

第二页.jsx

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

应用程序.jsx:

import Header from './header.jsx';

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

网络应用程序.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>
);

试试这个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>
);};

所以如果你需要在你的路由中显示一个共同的标题,有几种方法可以做到。一种是您可以在其自己的组件中定义您的标头。一些简单的例如:

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

然后在你的 home 组件、app 组件等中。在每个文件的顶部导入它之后,只需将它放在你的 render() 中。

另一种选择是创建自己的容器组件,仍然使用我们上面定义的 Header 组件:

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

不可否认,我还没有尝试过第二种选择。如果您想执行诸如router.transitionTo('/path').

如果您不想到处重复,这只是一个选择。