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

[sleepy-Jerry]

相关平台

支付宝小程序

小程序基础库: 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 

[AdvancedCat]

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

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

[SSRChen]

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

template

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

script

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

实际结果

[Chen-jj]

在小程序中，React、Vue 的 ref 获取到的是 Taro 虚拟 DOM，而不是小程序自定义组件的实例。要获取后者，可以使用 $selectComponent：https://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]

@moseszhou 什么小程序

[moseszhou]

@moseszhou 什么小程序

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

[harwinvoid]

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

template

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

script

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

实际结果

你这边最后是咋解决的