在路由中应用时响应 HOC 无限循环

Question

我在尝试使用 HOC 包装器渲染我的组件路由时遇到了无限循环。 路由呈现方法如下所示：

const render = (route, additionalProps) => {
const scrollActive = has(route, "scroll") ? route.scroll : true;
const Component = scrollActive
? withScrollToTop(route.component)
: route.component;
return props => {
return <Component {...props} {...additionalProps} route={route} />;
};
return (
<Switch>
{routes.map((route, i) => {
return (
<Route
key={i}
path={route.path}
exact={route.exact}
strict={route.strict}
render={render(route, injectProps)}
/>
);
})}
</Switch>
);

目前(因为它是循环的(，HOC 除了用另一个类包装组件之外，实际上没有做任何事情。

export default function withScrollToTop(WrappedComponent) {
const displayName = `HigherOrder.WithScrollToTop('${getDisplayName(
WrappedComponent
)}')`;
class WithScrollToTop extends React.PureComponent {
static displayName = displayName;
static WrappedComponent = WrappedComponent;
render() {
const props = Object.assign({}, this.props);
return React.createElement(WrappedComponent, props);
}
}
return hoistStatics(WithScrollToTop, WrappedComponent);
}

尝试命中任何路线都会导致无限循环。

Answer 1

你的问题是这一行：render={render(route, injectProps)}(您的没有最终}(。

这将触发render函数，它不会将函数传递给子props。