ルーティングで適用すると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