React js 做通用头部

Posted 2023-02-22

【中文标题】React js 做通用头部

【英文标题】：React js do common header

【发布时间】：2016-11-25 09:26:14

【问题描述】：

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

【问题讨论】：

您应该发布您尝试修复的代码。因此，发布公共头组件，它是如何包含在您的容器/***组件中的。以及你是如何进行路由的。

抱歉，无法修复。还没有做。

【参考方案1】：

这应该可行：

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

【讨论】：

我有多个 jsx 文件，例如 Home.jsx、About.jsx。在这种情况下，我需要做什么。

更新了答案以反映分离的文件。

太完美了@lalkmim

如果我想隐藏路径“/first”的组件App，我们如何实现以及是否可以根据路由更改更改标题标题。

在这种情况下，您必须取消嵌套路由并在每个路由上包含 <Header /> 组件。但这将是一个糟糕的方法。路由/first 和/second 之间共有的所有内容都应提取到App 组件中。

【参考方案2】：

因此，如果您需要在您的路线之间显示一个公共标题，有几种方法可以做到这一点。一种是您可以在自己的组件中定义标题。举个简单的例子：

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

然后在您的主组件、应用程序组件等中。只需在您的 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') 之类的操作，您可能必须将路由器作为参数从容器组件传递到子组件的使用。

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

【参考方案3】：

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

【讨论】：

谁投了反对票，请解释！这个插件看起来很棒，看起来维护得很好并且有很多星星；）

@abimelex - 我没有投反对票，但如果我正确理解了头盔，它用于更改“文档头”（即 html 元素）而不是提供共享组件头如 OP 的问题中所述。