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。

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

1 个答案: