如何传递通过 useRef 收集的数据，然后将其传递给不同的函数？

如何解决如何传递通过 useRef 收集的数据，然后将其传递给不同的函数？

我的组件中有以下 return 语句...

 return (
    <StyledAlbums>
      <PageTitle>
        <h2>Albums</h2>
      </PageTitle>
      <displayRecords ref={drRef}>
        {albumData.map((album) => (
          <Record />
        ))}
      </displayRecords>
    </StyledAlbums>
  );

在我的组件的逻辑部分，在 return 语句之前，一旦 drRef.current 中的数据被分配了它所引用的 div 的值，我如何使用它？我已经尝试了以下...

const getData = async () => {
    let data;
    if (drRef.current) {
      data = drRef.current;
    } else {
      data = await drRef.current;
    }
    console.log(data);
  };

然而，这将返回 undefined。此外，一旦我掌握了引用的元素，我想将它传递给我文档中的另一个函数。但是，我知道您不能将 React Hooks 传递给不同的函数。我尝试通过 props 将数据传递给函数来实现，但我收到了无法传递 React 钩子的错误消息。

总的来说，我的代码看起来像这样......

const useWindowSize = (element) => {
  const [size,setSize] = useState([window.innerHeight,window.innerWidth]);

  useEffect(() => {
    const handleResize = () => {
      setSize([window.innerHeight,window.innerWidth]);
    };
    window.addEventListener("resize",handleResize);
    return () => {
      window.removeEventListener("resize",handleResize);
    };
  },[]);

  return size;
};

const Albums = () => {
  // Set data and grab needed state

  const theme = useSelector((state) => state.theme);
  const albumData = data();
  const drRef = useRef();

  const getData = async () => {
    let data;
    if (drRef.current) {
      data = drRef.current;
    } else {
      data = await drRef.current;
    }
    console.log(data);
  };

  getData();

  return (
    <StyledAlbums>
      <PageTitle>
        <h2>Albums</h2>
      </PageTitle>
      <displayRecords ref={drRef}>
        {albumData.map((album) => (
          <Record />
        ))}
      </displayRecords>
    </StyledAlbums>
  );
};

const StyledAlbums = styled.div`
  width: 100%;
  height: calc(100vh - 8rem - 2.8rem - 5vh - 4rem);
  position: relative;
`;
const displayRecords = styled.div`
  height: calc(100% - 4.7rem);
  position: relative;
  background: red;
`;

export default Albums;

预先感谢您提供的任何帮助。

解决方法

为了获得你的 useRef 变量已分配给的 html 元素的引用，你可以像这样使用 ref 道具的回调函数：

const drRef = useRef();
const getNode = node => {
   // call your function here like xyz(node);
   drRef.current = node;
};

...
<DisplayRecords ref={ getNode }>
...