我目前在 React 组件中成功地显示了一堆图像，但不确定在哪里放置事件侦听器以便currentImageIdIndex在滚动时访问。

import React, { useEffect, useRef, useCallback } from "react";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneFileImageLoader from "cornerstone-file-image-loader";
import Hammer from "hammerjs";

function StackImageViewport(props) {
  const viewerRef = useRef(null);

  const base64StringToArrayBuffer = useCallback((base64) => {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }, []);

  const initializeCornerstone = () => {
    // Initialise cornerstone and link to DOM element
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneFileImageLoader.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.init();
    cornerstone.enable(viewerRef.current);
  };

  const setCornerstoneTools = () => {
    // define Cornerstone Tools
    const StackScrollTool = cornerstoneTools.StackScrollTool;
    const StackScrollMouseWheelTool =
      cornerstoneTools.StackScrollMouseWheelTool;
    const WindowingTool = cornerstoneTools.WwwcTool;

    // Add tools

    cornerstoneTools.addTool(StackScrollTool);
    cornerstoneTools.addTool(StackScrollMouseWheelTool);
    cornerstoneTools.addTool(WindowingTool);

    // set tools to Active state
    cornerstoneTools.setToolActive("StackScroll", { mouseButtonMask: 1 });
    cornerstoneTools.setToolActive("StackScrollMouseWheel", {});
    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
  };

  const displayStack = (stackMediaArray) => {
    let mediaArray = [];


    // 'stackMediaArray' is an array of images, each containing a buffer of the image
    Promise.all(
      stackMediaArray.map((mediaObject) => {
        return new Promise((resolve, reject) => {
          let imageBuffer = base64StringToArrayBuffer(mediaObject.buffer);
          const imageId =
            cornerstoneFileImageLoader.fileManager.addBuffer(imageBuffer);
          mediaArray.push(imageId);

          resolve(mediaObject);
        }).catch(console.error);
      })
    );

    //define the stack
    const stack = {
      currentImageIdIndex: 0,
      imageIds: mediaArray,
    };

    // load images and set the stack
    cornerstone.loadAndCacheImage(mediaArray[0]).then((image) => {
      cornerstone.displayImage(viewerRef.current, image);
      cornerstoneTools.addStackStateManager(viewerRef.current, ["stack"]);
      cornerstoneTools.addToolState(viewerRef.current, "stack", stack);
    });

    setCornerstoneTools();
  };

  useEffect(() => {
    if (!viewerRef.current) {
      return;
    }
    initializeCornerstone();
    displayStack(props.stackMediaArray);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [viewerRef]);

  return (
    <>
      <div ref={viewerRef} id="viewer" className="flex h-1/2-screen"></div>
    </>
  );
}

export default StackImageViewport;

这试图回答这个问题：

https://github.com/cornerstonejs/cornerstoneTools/issues/1121

但是，我不想访问 DOM 元素来添加事件侦听器。

同样清楚的是，在 Cornertsone.js 中可以访问事件：

https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/events.js

...但我仍然不确定在哪里放置事件监听器？

任何帮助将非常感激。

谢谢。