[英]How to call a component inside a component using React Router
我正在使用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')
)
}
但后来我没有路由器。
我需要帮助。 非常感谢
考虑一下:
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)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.