Taro: 【feature】建议支持高阶组件

[youngluo]

是否能够支持高阶组件

[yuche]

目前 Taro 的高阶组件只能劫持非 JSX 方法。有 JSX 的方法实际上是小程序模板，小程序的模板是没有继承这个说法的。

你可以参考 taro-redux 的实现
https://github.com/NervJS/taro/tree/master/packages/taro-redux
或者 taro-apollo
https://github.com/kdong007/taro-apollo

[taro-bot[bot]]

CC @yuche

[JohannLai]

@yuche 请问目前的支持情况有变化吗？

[yuche]

已经有分支在开搞了

[youngluo]

👏

[luoboding]

高阶组件都不能玩，感觉一下子失去了好多自由！

[youngluo]

已经有分支在开搞了

@yuche 不知现在什么情况了

[yuche]

高阶组件规划在下一个 minor 版本

[Janice1114]

这个目前是有相关开发的分支吗？

[jackie-gan]

请问一下下一个minor版本预计是什么时候呢？同求分支

[leoswing]

高阶组件这块在小程序支持劫持render的有相关update么？ @yuche 谢谢

[youngluo]

请问一下下一个minor版本预计是什么时候呢？同求分支

同求

[bobsam]

请问高阶组件的方式什么时候可以呢？

[shenghanqin]

我是这么用的。嘻嘻

import { connect } from '@tarojs/redux'
import { modelName as userModel, getPassSdk } from '@/store/user'
import { LOGIN_STATUS } from 'constants/status'
import EventEmitter from 'utils/event-emitter'

/**
 * 为 page 级别组件添加公共方法，向被装饰组件塞入 props
 * @param {ReactComponentLike} TaroComponent
 */
export default function WithPage(TaroComponent) {
  @connect(state => ({
    loginStatus: state[userModel].loginStatus,
    isLogin: state[userModel].loginStatus === LOGIN_STATUS.SUCCESS,
    userInfo: state[userModel].userInfo
  }))
  class CorePage extends TaroComponent {
    static options = {
      addGlobalClass: true
    }

    componentWillMount() {

      // 全局通知登录状态
      if (typeof this.onInitLoginCallback === 'function') {
        EventEmitter.on('login-callback-status', this.__loginCallback)
      }

      if (super.componentWillMount) {
        super.componentWillMount()
      }
    }

    componentDidShow() {
      // taro中的Page是基于Component来写的，所以在Bisdk中没法在Page上注入监听
      if (process.env.TARO_ENV === 'weapp') {
        wx.bisdk && wx.bisdk.onPageShow && wx.bisdk.onPageShow()
      }
      if (super.componentDidShow) {
        super.componentDidShow()
      }
    }

    componentWillUnmount() {

      // 全局通知登录状态
      if (typeof this.onInitLoginCallback === 'function') {
        EventEmitter.off('login-callback-status', this.__loginCallback)
      }

      if (super.componentWillUnmount) {
        super.componentWillUnmount()
      }
    }

    __loginCallback = (loginStatus) => {  // 防止登录过程超过1s时回调
      this.onInitLoginCallback({
        ...this.props.userInfo,
        sourceType: 'async',
        loginStatus
      })
    }


    // TODO 这个方法可以等待废弃
    /**
     * 登录态监听
     */
    __checkLogin = () => {
      if (typeof this.onInitLoginCallback === 'function') {
        const { isLogin, userInfo } = this.props
        const passSdk = getPassSdk() || {}
        if (isLogin) {
          this.onInitLoginCallback({ sourceType: 'sync', ...userInfo })
        } else if (passSdk.initialized) {
          this.onInitLoginCallback({ sourceType: 'autoLoginFail', ...userInfo })
        }
      }
    }

  }

  CorePage.displayName = TaroComponent.displayName
    || TaroComponent.name
    || 'CorePage'

  return CorePage
}

[taro-bot[bot]]

Hello~

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

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

Good luck and happy coding~