如何使用 React Router 调用组件内部的组件

Question

我正在使用 React、MobX 状态树和 react-router 创建一个简单的网站。

基本上，网站的每个页面（Page1、Page2 和 Page3）都必须包含一个针对桌面设备和移动设备不同的菜单。

这是我的结构：

index.tsx：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'
import { Router } from 'react-router'
import { State } from './states'
import { Routes } from './Routes'
import { history } from './states/index'

function renderApp() {
  ReactDOM.render(
    <Provider state={State}>
      <Router history={history}>
        <Routes />
      </Router>
    </Provider>,
    document.getElementById('root')
  )
}

Routes.tsx 是：

function About() {
  return <h2>About</h2>
}


function RedirectToHomepage() {
  return <Redirect to="/" />
}

function withHeader(Component: React.ComponentClass) {
  return class withHeader extends React.Component {
    render() {
      return (
        <div className="flex flex-column w-100 h-100">
          <Header />
          <Component />
        </div>
      )
    }
  }
}

@inject('state')
@observer
class WithMenu extends React.Component<IStateable> {
  menuWidth = () => {
    const { ui } = this.props.state
    if (ui.isSmallDevice) {
      return ui.isMenuOpen ? 'w-100 h-100' : 'w0 h0'
    } else {
      return 'w-20 min-w5 max-w6 h-100'
    }
  }

  render() {
    const { children } = this.props
    const { ui } = this.props.state
    const menuWidth = this.menuWidth()
    const showMenu = ui.isDesktop || ui.isMenuOpen

    return (
      <div className={`w-100 h-100 flex`}>
        {showMenu && <Menu className={`${menuWidth}`} />}
        {!showMenu && <div className={`flex-auto`}>{children}</div>}
      </div>
    )
  }
}

export function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={withHeader(Homepage)} />
      <Route path="/about" exact component={About} />
      <Route path={path} exact component={withHeader(Page1)} />
      <Route path={path} exact component={withHeader(Page2)} />
      <Route path={path} exact component={withHeader(Page3)} />
      <Route component={RedirectToHomepage} />
    </Switch>
  )
}

我想要的是带有页眉和菜单的 Page1、Page2 和 Page3。 所以，有可能构建一个我可以调用的函数，比如component={withHeaderAndMenu(Page1)}？ 我不想在每个组件中重复 WithMenu 类中的逻辑。

我试着放在这里：

function renderApp() {
  ReactDOM.render(
    <WithMenu>
      <Provider state={State}>
        <Router history={history}>
          <Routes />
        </Router>
      </Provider>
    </WithMenu>
    document.getElementById('root')
  )
}

然后我没有路由器。

我需要帮助。非常感谢

Answer 1

考虑一下：

function withHeaderAndMenu(Component: React.ComponentClass) {
  return class WithHeaderAndMenu extends React.Component {
    render() {
      return (
        <div className="flex flex-column w-100 h-100">
          <Header />
          <WithMenu />
          <Component />
        </div>
      )
    }
  }
}

还有：

      <Route path={path} exact component={withHeaderAndMenu(Page1)} />
      <Route path={path} exact component={withHeaderAndMenu(Page2)} />
      <Route path={path} exact component={withHeaderAndMenu(Page3)} />