Reaction HOC Endlosschleife, wenn im Routing angewendet

Question

Ich stoße auf eine Endlosschleife beim Versuch, meine Komponenten Routen mit einem HOC-Wrapper zu rendern. Die Routing-Render-Methode sieht ungefähr so ​​aus:

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> 
); 

Zur Zeit Befinden (da es Looping out), wird die HOC nicht wirklich etwas zu tun, außer die Komponente mit einer anderen Klasse Verpackung.

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); 
} 

Der Versuch, eine beliebige Route zu treffen, verursacht eine Endlosschleife.

Answer 1

Ihr Problem ist diese Zeile: render={render(route, injectProps)} (Ihre haben nicht die endgültige }).

Dies wird render Funktion auslösen, es übergibt die Funktion nicht an Kinder props.