如何在完全基于功能组件的反应应用程序中获取元素的大小？

Question

我有一个纯粹用功能组件构建的 React 应用程序。我想在屏幕上呈现元素后获取元素的高度，以相应地更改其父元素的大小。

有针对基于 class 的应用程序的解决方案，但我找不到任何针对功能组件的解决方案。

我从答案中尝试了这个解决方案，但它不是运行 useEffect 挂钩

这里是从我的组件中提取的代码

import React, {useRef, useEffect} from 'react';
import {
    MenuContainer,
    GrayBox,
    Wrapper

} from '../LayersMenu/LayerMenu.styles';


export const Component = ({ category, showStatistics }) => {
    const grayBoxRef= useRef(null);
    const wrapperRef= useRef(null);
    const testRef= useRef(null);
    useEffect(()=>{
        const height = wrapperRef.current.offsetHeight;
        console.log(height,'check');
      }, [wrapperRef])
    useEffect(()=>{
        const height = testRef.current.offsetHeight;
        console.log(height,'check2');
    },[testRef]);
    return (
        <MenuContainer ref={testRef}>
            <GrayBox ref={grayBoxRef}>
                <Wrapper ref={wrapperRef} hasAnyAllowedStats={showStatistics}>
                </Wrapper>
            </GrayBox>
        </MenuContainer>
    );
};

PS：已接受的答案对我的答案不起作用，但对他在答案中添加的项目有效，所以我猜我的项目结构有问题或不完全确定。

非常感谢您的回答

Answer 1

使用 useRef-hook:

export const SomeComponent = () => {

const divRef= useRef(null);

   useEffect(()=>{
     if(divRef.current){
     // your logic
     }
   }, [divRef])

   return(
   <div ref={divRef}></div>
   )
}

Answer 2

不是将 class 组件与 componentDidMount 一起使用，而是使用一个名为 useEffect 的挂钩，它可以帮助您以某种方式捕获组件的渲染状态。

获取呈现的 DOM 元素高度的解决方案可以是以下功能组件：

 const YourComponent = () => {
   const inputRef = useRef(null);
   useEffect(() => {
      const height = inputRef.current.offsetHeight;
      console.log('Input height', height);   
   }, [inputRef]);

   return <>
     <input ref={inputRef} type="text" defaultValue="testing" />
   </>
}

解释：

useRef 钩子将帮助您在组件的生命周期内保持对象的引用，如文档所述：

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

一旦您将 useEffect 与 useRef 结合使用，就像在上述解决方案中一样，您将获得预期的结果。对于 useEffect 钩子，文档解释说：

The function passed to useEffect will run after the render is committed to the screen.

将 inputRef 传递给依赖项数组将在更改 useEffect 的 input 元素时触发传递的函数。然后代码计算组件的高度，在本例中只是一个 input 元素。这可以是任何 DOM 元素，就像 div.

更新：

根据您更新的问题，解决方案是 forwardRef，阅读文档：

Ref forwarding is a technique for automatically passing a ref through a component to one of its children.

使用此技术，您可以在父组件中访问子组件的属性，例如：内部 <div> 或 <input> 元素的高度，代码可将其用于进一步的目的。

在您的子功能组件中，代码应使用 forwardRef 以访问内部 DOM 元素，如下所示：

import React, { forwardRef } from 'react';

// ...

const YourComponent = forwardRef((props, ref) => {
   return <>
      <input ref={ref} type="text" defaultValue="testing" />
   </>
});

然后在父组件中使用如下：

const componentRef = useRef(null);
useEffect(() => {
    const {offsetHeight} = componentRef.current;
    console.log('componentRef height', offsetHeight);   
}, [componentRef]);

return <>
    <YourComponent ref={componentRef} />
</>

如果您有进一步的兴趣，请在此处查找文档： Forwarding refs to DOM components

请为您的场景找到一个可行的 GitHub 解决方案，我刚刚为表示而建立的解决方案： norbitrial/react-forwarding-ref-example

希望这能给您继续前进的想法。

如何在完全基于功能组件的反应应用程序中获取元素的大小？

How to get size of an element in an react app that is totally based on functional components?

javascript

reactjs

styled-components

react-functional-component