Reactjs 反应一致的页面元素_Reactjs_React Router

Reactjs 反应一致的页面元素

reactjs

Reactjs 反应一致的页面元素,reactjs,react-router,Reactjs,React Router,我最近开始在一个项目中使用React，我正在处理一个快速的问题我创建了几个页面组件，但希望每个组件都有相同的标题-当前它们的render（）函数如下所示： return ( <div> <Header /> ... {{ page specific elements here }} </div> ) 和我的index.html页面： <body> <div> <div class

我最近开始在一个项目中使用React，我正在处理一个快速的问题

我创建了几个页面组件，但希望每个组件都有相同的标题-当前它们的

render（）

函数如下所示：

return (
  <div>
    <Header />
    ... {{ page specific elements here }}
  </div>
)

和我的index.html页面：

<body>
    <div>
        <div class="row">
            <div class="col-lg-12">
                <div id="app"></div>
            </div>
        </div>
    </div>
    <script src="client.min.js"></script>
</body>

您可以使用

像这样：

function withLayout(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
         <div>
             <Header /> // header or any thing
             <WrappedComponent {...this.props} />
         </div>
      )
    }
  };
}

带布局的函数（WrappedComponent）{
返回类扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
//头或任何东西
)
}
};
}

以及在页面容器中（例如：Discover）：

类发现扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
胡说八道……我是发现页面
)
}
};
const discoverWithLayout=withLayout（Discover）
导出默认discoverWithLayout

如果您希望在路由器内的所有路由上一致地呈现标头，那么只需在路由器内添加

标头

组件即可

import Header from './components/Header'
import history from './history'
import React from 'react'
import ReactDOM from 'react-dom'
import { Link, Route, Router, Switch } from 'react-router-dom'

import Discover from './pages/Discover';
import Layout from './pages/Layout';
import Search from './pages/Search';

const app = document.getElementById('app')

ReactDOM.render(
    <Router history={history}>
        <Header/> {//Just put it in here}
        <Switch>
            <Route exact path='/' component={Layout}/>
            <Route path='/discover' component={Discover}/>
            <Route path='/search' component={Search}/>
        </Switch>
    </Router>,
app
)

然后在内部路径中：

<div>
    <Header/> {//Just put it in here}
    <Switch>
       <Route exact path='/' component={Layout}/>
       <Route path='/discover' component={Discover}/>
       <Route path='/search' component={Search}/>
    </Switch>
  </div>


{//把它放在这里}

谢谢-它可以工作，但是我抱怨元素只允许有一个子元素，所以我将标题/开关包装在一个div中！：）

import Header from './components/Header'
import history from './history'
import React from 'react'
import ReactDOM from 'react-dom'
import { Link, Route, Router, Switch } from 'react-router-dom'

import Discover from './pages/Discover';
import Layout from './pages/Layout';
import Search from './pages/Search';

const app = document.getElementById('app')

ReactDOM.render(
    <Router history={history}>
        <Header/> {//Just put it in here}
        <Switch>
            <Route exact path='/' component={Layout}/>
            <Route path='/discover' component={Discover}/>
            <Route path='/search' component={Search}/>
        </Switch>
    </Router>,
app
)

ReactDOM.render(
    <Router history={history}>
       <Route exact path='/login' component={Login}/>
       <Route path='/' component={App}/>
    </Router>,
app
)

<div>
    <Header/> {//Just put it in here}
    <Switch>
       <Route exact path='/' component={Layout}/>
       <Route path='/discover' component={Discover}/>
       <Route path='/search' component={Search}/>
    </Switch>
  </div>