无法正确获取 VirtualWaterfall 组件实例

[aimerthyr]

相关平台

微信小程序

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

复现步骤

我使用的函数式组件，在官网 VirtualWaterfall 的示例中直接拷贝的内容

import { createRef, memo, useEffect, useLayoutEffect } from 'react';

import { View } from '@tarojs/components';
import { VirtualWaterfall, VirtualWaterfallProps } from '@tarojs/components-advanced';

import { useLoad, useReady } from '@tarojs/taro';

import './index.scss';

function buildData(offset = 0) {
  return Array(100)
    .fill(0)
    .map((_, i) => i   offset);
}

const Row = memo(({ id, index, data }: { id: string; data: any[]; index: number }) => {
  return (
    <>
      <View id={id}>{data[index]}</View>
    </>
  );
});

export default function Schedule() {
  const waterfallRef = createRef();
  useLoad(() => {
    console.log(waterfallRef, 'waterfallRef');
  });

  useReady(() => {
    console.log(waterfallRef, 'waterfallRef');
  });

  useEffect(() => {
    console.log(waterfallRef, 'waterfallRef');
  }, [waterfallRef]);

  useLayoutEffect(() => {
    console.log(waterfallRef, 'waterfallRef');
  });

  const data = buildData(0);

  function onScroll(event: VirtualWaterfallProps.IVirtualWaterfallEvent) {}

  return (
    <>
      <VirtualWaterfall
        column={7} /* 列表的列数 */
        height={300} /* 列表的高度 */
        width="100%" /* 列表的宽度 */
        item={Row} /* 列表单项组件，这里只能传入一个组件 */
        itemData={data} /* 渲染列表的数据 */
        itemCount={data.length} /* 渲染列表的长度 */
        itemSize={100} /* 列表单项的高度  */
        onScroll={event => {
          onScroll(event);
        }}
      />
    </>
  );
}

期望结果

我希望正确获取到 VirtualWaterfall 实例

实际结果

实际返回的是 null

环境信息

👽 Taro v3.6.17


  Taro CLI 3.6.17 environment info:
    System:
      OS: macOS 13.5.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.12.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.19.2 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.17 => 3.6.17 
      @tarojs/components: 3.6.17 => 3.6.17 
      @tarojs/helper: 3.6.17 => 3.6.17 
      @tarojs/plugin-framework-react: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17 
      @tarojs/react: 3.6.17 => 3.6.17 
      @tarojs/runtime: 3.6.17 => 3.6.17 
      @tarojs/shared: 3.6.17 => 3.6.17 
      @tarojs/taro: 3.6.17 => 3.6.17 
      @tarojs/taro-loader: 3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: 3.6.17 => 3.6.17 
      babel-preset-taro: 3.6.17 => 3.6.17 
      eslint-config-taro: 3.6.17 => 3.6.17 
      react: ^18.0.0 => 18.2.0 
    npmGlobalPackages:
      typescript: 4.2.4