在 HOC 中包装 React 路由渲染函数
Wrap a React route render function in a HOC
我正在使用 React-Router 4 创建一些路由。 (它使用 official docs 中的 PrivateRoute
组件,但这与这个问题无关。)
<HashRouter>
<Switch>
<PrivateRoute exact path='/' component={Wrapper(Home)} />
<Route exact path='/login' render={(props) => <Login authenticate={this.authenticate} {...props} />} />
<PrivateRoute exact path='/clients' component={Wrapper(Clients)} />
</Switch>
</HashRouter>
如您所见,Home
和 Clients
组件包含在 HOC 中。目前这没有任何作用:
const Wrapper = (Page) => {
return (props) => (
<div className="page">
<p>This should be on every page</p>
<Page {...props} />
</div>
);
}
这很好用。我想不通的是如何将 Login
路由包装在同一个 HOC 中。我试过了
<Route exact path='/login' render={(props) => Wrapper(<Login authenticate={this.authenticate} {...props} />)} />
但是这个returns错误:
Route.render(): A valid React element (or null) must be returned.
你可以尝试这样做吗:
<Route exact path='/login' render={(props) => Wrapper(Login)({...props, authenticate: this.authenticate})} />
因为现在 Wrapper HOC 正在返回一个函数,但是 react 元素是预期的。要获得反应元素,我们需要使用所需的道具调用此函数,这似乎是添加额外道具的好地方 this.authenticate
.
这是我制作的一个简短片段:
https://stackblitz.com/edit/react-zestnq
我正在使用 React-Router 4 创建一些路由。 (它使用 official docs 中的 PrivateRoute
组件,但这与这个问题无关。)
<HashRouter>
<Switch>
<PrivateRoute exact path='/' component={Wrapper(Home)} />
<Route exact path='/login' render={(props) => <Login authenticate={this.authenticate} {...props} />} />
<PrivateRoute exact path='/clients' component={Wrapper(Clients)} />
</Switch>
</HashRouter>
如您所见,Home
和 Clients
组件包含在 HOC 中。目前这没有任何作用:
const Wrapper = (Page) => {
return (props) => (
<div className="page">
<p>This should be on every page</p>
<Page {...props} />
</div>
);
}
这很好用。我想不通的是如何将 Login
路由包装在同一个 HOC 中。我试过了
<Route exact path='/login' render={(props) => Wrapper(<Login authenticate={this.authenticate} {...props} />)} />
但是这个returns错误:
Route.render(): A valid React element (or null) must be returned.
你可以尝试这样做吗:
<Route exact path='/login' render={(props) => Wrapper(Login)({...props, authenticate: this.authenticate})} />
因为现在 Wrapper HOC 正在返回一个函数,但是 react 元素是预期的。要获得反应元素,我们需要使用所需的道具调用此函数,这似乎是添加额外道具的好地方 this.authenticate
.
这是我制作的一个简短片段: https://stackblitz.com/edit/react-zestnq