自定义继承Taro.Component的class, this有问题

[ilp64]

问题描述

我想实现一个路由守卫的功能，通过在组件和Taro.Component中间加一个GuardComponent，在这个GuardComponent里面控制组件的render，先显示loading，当守卫通过的时候，触发组件的render，守卫未通过的时候，就去登录之类的，这样会确保用户在守卫未完成之前不会看到页面上的任何内容。
现在的问题是在h5模式下这个是没问题的，但是在微信小程序模式下面，GuardComponent的constructor里面的this却始终指向GuardComponent，也就拿不到子组件的render了。

复现步骤

class GuardComponent<T, U> extends Taro.Component<T, U> {
  constructor() {
    super();
    this.state = {
      // @ts-ignore
      GUARD_LOADING: true
    };
    /**
     * 这里的this有问题, h5模式下能够拿到子类实例, 微信小程序里面一直是当前这个GuardComponent
     */
    this._RAW_RENDER = this.render;
    this._RAW_COMPONENT_DID_SHOW = this.componentDidShow;
    this.componentDidShow = this.fakeComponentDidShow;
    this.render = this.fakeRender;
    Taro.showLoading({mask: true, title: ''});
  }

  _RAW_RENDER: any;
  _RAW_COMPONENT_DID_SHOW: any;

  fakeComponentDidShow() {
    // 模拟用户校验
    setTimeout(_ => {
      const passed = true;
      if (passed) {
        // @ts-ignore
        this.setState({GUARD_LOADING: false});
        this._RAW_COMPONENT_DID_SHOW();
      } else {
        Taro.redirectTo({
          url: '/login-page'
        });
      }
      Taro.hideLoading();
    }, 2000);
  }

  fakeRender() {
    // @ts-ignore
    const {GUARD_LOADING} = this.state;
    if (GUARD_LOADING) {
      return null;
    }
    return this._RAW_RENDER();
  }
}

export default class Index extends GuardComponent<null, {
  content: string;
}>{
  constructor() {
    super();
    this.state = {
      ...this.state,
      content: '我应该在loading结束后才出现'
    };
  }

  componentDidShow() {
  }

  render() {
    return <View>{this.state.content}</View>
  }
}

期望行为

希望在微信小程序下能够和h5一样，在GuardComponent的constructor里面能够获取到子类的实例。
如果此方法行不通的话，希望大佬们可以给我指点一下可行的办法🙏。

报错信息

系统信息

Taro CLI 1.3.18 environment info:
System:
OS: macOS 10.14.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.8.0 - ~/.nvm/versions/node/v11.8.0/bin/node
Yarn: 1.15.2 - ~/.yarn/bin/yarn
npm: 6.5.0 - ~/.nvm/versions/node/v11.8.0/bin/npm
npmPackages:
@tarojs/async-await: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/components: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/plugin-babel: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/plugin-csso: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/plugin-sass: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/plugin-uglifyjs: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/router: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-alipay: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-h5: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-qq: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-quickapp: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-swan: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-tt: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/taro-weapp: 2.0.0-beta.13 => 2.0.0-beta.13
@tarojs/webpack-runner: 2.0.0-beta.13 => 2.0.0-beta.13
eslint-config-taro: 2.0.0-beta.13 => 2.0.0-beta.13
eslint-plugin-taro: 2.0.0-beta.13 => 2.0.0-beta.13
nerv-devtools: ^1.5.6 => 1.5.6
nervjs: ^1.5.6 => 1.5.6
stylelint-config-taro-rn: 2.0.0-beta.13 => 2.0.0-beta.13
stylelint-taro-rn: 2.0.0-beta.13 => 2.0.0-beta.13

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@ilp64

1. this 没错，只是你页面没写 componentDiDShow，所以调用 this._RAW_COMPONENT_DID_SHOW() 会报 not a function 错而已。

2. 小程序中 render 会被编译成 createData 函数，运行时并不存在 render，因此你劫持 render 是没用的，这种做法在小程序端走不通。

3. class Component 你可以用 HOC，function Component 你可以用 hooks，少用继承。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[ilp64]

@Chen-jj 多谢大佬回复，不过这个this确实有问题，GuardComponent的constructor里面的this没有子类的信息，所以this._RAW_COMPONENT_DID_SHOW = this.componentDidShow;这里的赋值把undefined赋值给了this._RAW_COMPONENT_DID_SHOW，而不是把子类的componentDidShow赋值给了this._RAW_COMPONENT_DID_SHOW。
但是h5下面没这个问题，this里面是可以拿到子类信息的。

[Chen-jj]

@ilp64 没有吧，试了ok

[ilp64]

@Chen-jj 大佬，你这个打印出来的东西，因为this的问题，是相当于没有经过GuardComponent代理过的，直接触发了子类自己的componentDidShow，你可以在GuardComponent的constructor里面打印下this，看看在h5和微信小程序下面的区别，h5下面能取到子类的实例，微信小程序下面就一直取不到子类实例。

请大佬再试一试😊

[Chen-jj]

@ilp64

你这个打印出来的东西，因为this的问题，是相当于没有经过GuardComponent代理过的，直接触发了子类自己的componentDidShow

setTimeout 里面触发 this._RAW_COMPONENT_DID_SHOW(); 打出的 log，为什么是相当于没有经过GuardComponent代理过？

[ilp64]

@Chen-jj 大佬不好意思，我搞错了，是在GuardComponent里的constructor里面拿不到子类的render，为undefined，结合你说的“小程序中 render 会被编译成 createData 函数，运行时并不存在 render”，我现在清楚了，不好意思，给大佬带来了那么多麻烦🙏

[DrakeXiang]

@ilp64
3. class Component 你可以用 HOC，function Component 你可以用 hooks，少用继承。

小程序不支持HOC哇