Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用ref获取支付宝小程序插件的实例时,只能获取到节点对象,无法获取实例对象 #13125

Closed
sleepy-Jerry opened this issue Jan 11, 2023 · 6 comments
Labels
F-react Framework - React T-alipay Target - 编译到支付宝小程序 V-3 Version - 3.x

Comments

@sleepy-Jerry
Copy link

相关平台

支付宝小程序

小程序基础库: 2.8.3
使用框架: React

复现步骤

因为插件需要订购,无法提供代码链接,这里提供一份伪代码:
订购某个支付宝插件,这里使用的是支付宝学生权益插件。使用如下方法获取插件的ref,期望获取到的studentVerifyRef是组件实例,可以调用组件内方法。但是只获取到了节点的信息。不知是我使用错误,还是存在类似的问题。

const Index = () => {
    let studentVerifyRef = null;
    const onStudentVerifyRef = (ref) => {
        studentVerifyRef = ref;
    }
    return (
        <Wrap>
            <student-verify
                ref={onStudentVerifyRef}
                shopName="xxx小程序" // 商户名(引导回流使用, xxx小程序)
                />
        </Wrap>
    )
}
export default Index

期望结果

获取到插件的实例信息

实际结果

获取到了节点信息

环境信息

👽 Taro v3.5.10


  Taro CLI 3.5.10 environment info:
    System:
      OS: macOS 12.5
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.3 => 3.4.3 
      @tarojs/components: 3.4.3 => 3.4.3 
      @tarojs/extend: ^3.4.1 => 3.4.8 
      @tarojs/mini-runner: 3.4.3 => 3.4.3 
      @tarojs/plugin-react-devtools: ^3.4.4 => 3.5.0 
      @tarojs/react: 3.4.3 => 3.4.3 
      @tarojs/runtime: 3.4.3 => 3.4.3 
      @tarojs/taro: 3.4.3 => 3.4.3 
      @tarojs/webpack-runner: 3.4.3 => 3.4.3 
      babel-preset-taro: 3.4.3 => 3.4.3 
      eslint-config-taro: 3.3.14 => 3.3.14 
      react: ^17.0.0 => 17.0.2 
      taro-ui: 3.1.0-beta.2 => 3.1.0-beta.2 
@taro-bot2 taro-bot2 bot added F-react Framework - React T-alipay Target - 编译到支付宝小程序 V-3 Version - 3.x labels Jan 11, 2023
@AdvancedCat
Copy link
Member

AdvancedCat commented Jan 12, 2023

这个看着不像taro的问题,要看插件如何处理 ref 入参了,比如 React.forwardRef

最好能提供可复现 demo,方便我们及时排查问题

@SSRChen
Copy link

SSRChen commented Apr 4, 2023

我用的是Vue,遇到了同样的问题

template

<student-verify :ref="onStudentVerifyRef" @Success="onVerifySuccess"></student-verify>

script

function onStudentVerifyRef(ref) { console.log(ref); }

实际结果

image

@Chen-jj
Copy link
Contributor

Chen-jj commented Jun 5, 2023

在小程序中,React、Vue 的 ref 获取到的是 Taro 虚拟 DOM,而不是小程序自定义组件的实例。要获取后者,可以使用 $selectComponenthttps://opendocs.alipay.com/mini/framework/component_object#%24selectComponent%2F%24selectAllComponents

export default function Index () {
  useReady(() => {
    Taro.nextTick(() => {
      const comp = getCurrentPages()[0].$selectComponent('#title')
      console.log('comp: ', comp)
    })
  })

  return (
    <View className='root'>
      <title id='title'></title>
    </View>
  )
}

不太确认这样能否获取插件的组件实例。

@Chen-jj
Copy link
Contributor

Chen-jj commented Jun 6, 2023

@moseszhou 什么小程序

@moseszhou
Copy link
Contributor

moseszhou commented Jun 6, 2023

@moseszhou 什么小程序

是我自己项目的问题,
需要开启Lib v2.0

@harwinvoid
Copy link

我用的是Vue,遇到了同样的问题

template

<student-verify :ref="onStudentVerifyRef" @Success="onVerifySuccess"></student-verify>

script

function onStudentVerifyRef(ref) { console.log(ref); }

实际结果

image
你这边最后是咋解决的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-alipay Target - 编译到支付宝小程序 V-3 Version - 3.x
Projects
None yet
Development

No branches or pull requests

6 participants