如何在react-beautiful dnd中访问ref和编程滚动

import React, { useRef } from 'react';

const MyComponent = () => {
  const scrollRef = useRef(null);

  // 其他代码...

  return (
    <div ref={scrollRef}>
      {/* 元素内容 */}
    </div>
  );
};

import { DragDropContext } from 'react-beautiful-dnd';

const App = () => {
  // 其他代码...

  return (
    <DragDropContext>
      {/* 应用程序的其他组件 */}
    </DragDropContext>
  );
};

import React, { useEffect, useRef } from 'react';

const MyComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      // 执行编程滚动操作
      scrollRef.current.scrollTo({
        top: 0, // 滚动到顶部
        behavior: 'smooth', // 平滑滚动
      });
    }
  }, []);

  return (
    <div ref={scrollRef}>
      {/* 元素内容 */}
    </div>
  );
};