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

【问题标题】：How can I pass the data collected via useRef and then pass it into a different function?如何传递通过 useRef 收集的数据，然后将其传递给不同的函数？
【发布时间】：2023-03-12 15:50:01
【问题描述】：

我的组件中有以下返回语句...

 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);
  };

但是，这返回未定义。此外，一旦我掌握了引用的元素，我想将它传递给我文档中的不同函数。但是，我知道你不能将 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;

提前感谢所有帮助。

【问题讨论】：

你从来没有为你的 ref 赋值，但你的 await 似乎暗示你已经为它分配了一个异步函数？我感觉你误解了钩子。

标签： reactjs react-hooks jsx react-state use-ref

【解决方案1】：

为了获取你的useRef变量被分配到的html元素的引用，你可以像这样使用ref prop的回调函数：


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

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

【讨论】：

感谢您的回复！这适用于在 getNode 函数中获取节点。我现在遇到的唯一问题是我无法将钩子作为参数传递给我的 useWindowSize 函数。首先它告诉我将其设为大写，所以我这样做了，然后我收到另一条错误消息，说我违反了钩子规则，这是确切的错误消息....错误：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：
你能说明你是如何使用传递给useWindowSize的钩子吗？此外，如果您的useWindowSize 是一个纯函数，它获取节点并提供一些输出，然后创建一个状态（useState）以跟踪何时将节点分配给 dom 元素。发生这种情况时，请使用 useMemo 调用 useWindowSize 并传递 ref 以获取结果。