问题描述
我的组件中有以下 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 }>
...