当在路由中应用HOC无限循环时
问题描述:
当我尝试使用HOC包装呈现组件路由时遇到无限循环。路由渲染方法看起来是这样的:当在路由中应用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);
}
试图命中任何路由会导致无限循环。
答
你的问题是这条线: render={render(route, injectProps)}
(你的没有最后的}
)。
这将触发render
函数,它不会将函数传递给子代props
。
对不起,这是从渲染道具中删除三元组的错字。我们还有另一个功能可以用工厂进行渲染。更新原始代码片段以更正丢失的大括号。 – mindlis
是的,正确类型的事件。你应该调用'render = {this.render ...}'或'render = {()=> this.render ...}'。你的绑定方式将马上执行'render'函数,而不是将'render'传递给'props' –