Réagissez la boucle infinie HOC lorsqu'elle est appliquée au routage

Question

Je rencontre une boucle infinie lorsque j'essaie de rendre mes routes de composant avec un wrapper HOC. La méthode render routage ressemble à quelque chose comme:

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

Pour le moment-être (car il tourne en boucle sur), le COH ne fait quoi que ce soit en plus enveloppant le composant avec une autre classe.

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

Toute tentative d'accès à une route provoque une boucle infinie.

Answer 1

Votre problème est cette ligne: render={render(route, injectProps)} (la vôtre n'a pas la version finale }).

Cela déclenchera render fonction, il ne passe pas la fonction aux enfants props.