Question

我最近开始将React用于我正在进行的项目并且有一个简单的问题。

我创建了一些页面组件，但希望每个组件具有相同的标头 - 目前他们的render()函数看起来像：

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

我想知道是否有一种方法可以将每个页面（即标题）上我想要的元素设置为一致，而无需手动将它们插入到每个组件的render函数中？

我的main.js文件是：

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}>
        <Switch>
            <Route exact path='/' component={Layout}/>
            <Route path='/discover' component={Discover}/>
            <Route path='/search' component={Search}/>
        </Switch>
    </Router>,
app
)

我的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>

Answer 1

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

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
)

如果你想避免它出现在特定的路线中，比如登录，你可以在main.js路线上渲染登录，然后将Switch带到内部路线。

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>

Answer 2

您可以使用React Higher-Order Component

执行此操作像这样：

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

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

并在您的页面容器中（例如：发现）：

class Discover extends React.Component {
     constructor(props) {
        super(props);
     }

     render() {
          return (
             <div>
                 blah blah .... I am discover page
             </div>
          )
      }
};
const discoverWithLayout = withLayout(Discover)
export default discoverWithLayout

反应一致的页面元素

2 个答案: