0

我有两个任务：

  1. 用 HOC 替换装饰器
  2. 是否可以构建一个返回纯函数而不是类的 HOC？又有多大意义，速度会不会有显着提升？

// _app.js

   @myDecorator(SelfClassForSaga, ['str1', 'str2'])
   class MyApp extends App {
     static async getInitialProps({Component, ctx}) {
        await ctx.store.stopSaga();
        await ctx.store.execSagaTasks(ctx, dispatch => {
            dispatch(SelfClassForSaga.actions.str1());
        });
        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
        return {pageProps};
     }
     render() {...}
   }
   export default MyApp;

// 我的装饰器

export const myDecorator = (SelfClassForSaga, StrArr) => (Component) => {}

我想用 HOC 替换装饰器，以便 _app 组件本身可以成为一个函数：

// HOC（我如何做 HOC 返回“类”）：

export const myHOC = (WrappedComponent, SelfClassForSaga, strArr) => {
    class WithHOC extends React.Component {
       constructor(props) {
          super(props);
       }
       public static async getInitialProps(ctx) {
          return WrappedComponent.getInitialProps ? await WrappedComponent.getInitialProps(ctx) : {};
       }

       // logic from old decorator(myDecorator) for SelfClassForSaga and StrArr

       public render() {
         return (
            <WrappedComponent {...this.props} />
         );
       }
    }
}

我想使用该功能：

const myHOC = (WrappedComponent, SelfClassForSaga, StrArr) => ({...props}) => {
   return <WrappedComponent {...props}/>
}

并相应地更改 _app.js 中的导出：

const WrappedApp = myHOC(MyApp, SelfClassForSaga, ['str1', 'str2']);
export default WrappedApp;

当然！，我得到一个错误，因为我没有在函数中调用 getInitialProps：

TypeError: Cannot read property 'execSagaTasks' of undefined (ctx is missing)

事实是/pages中的页面也包裹在 HOC 中，并且在浏览器中它还说没有ctx

如何正确调用 getInitialProps 并进一步返回包装的组件？谢谢你的帮助！

4

0 回答 0