在 HOC 中包装 React 路由渲染函数

Question

我正在使用 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.

Answer 1

你可以尝试这样做吗：

<Route exact path='/login' render={(props) => Wrapper(Login)({...props, authenticate: this.authenticate})} />

因为现在 Wrapper HOC 正在返回一个函数，但是 react 元素是预期的。要获得反应元素，我们需要使用所需的道具调用此函数，这似乎是添加额外道具的好地方 this.authenticate.

这是我制作的一个简短片段： https://stackblitz.com/edit/react-zestnq

在 HOC 中包装 React 路由渲染函数

Wrap a React route render function in a HOC

javascript

reactjs

react-router

higher-order-components