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

Question

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

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

我从答案中尝试了这个解决方案，但它没有运行 useEffect Hook

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

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

而不是将类组件与 componentDidMount 一起使用有一个钩子(Hook)叫做 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钩子(Hook)将帮助您在组件的生命周期内保持对象的引用，如文档所述:

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钩子(Hook)文档解释:

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

传递 inputRef到依赖项数组将在 input 更改时触发传递的函数useEffect 的元素.然后代码计算组件的高度，在本例中只是一个 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

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