如何使用来自反应的钩子参考检查我的组件的高度？答案

【问题标题】：how to check the height of my component with hook ref from react?如何使用来自反应的钩子参考检查我的组件的高度？
【发布时间】：2021-07-30 14:24:14
【问题描述】：

我正在尝试检查按钮的高度是否为 50 以显示不同的微调器，但即使高度为 50 也会显示 SpinnerTwo，有人知道问题所在吗？

const Button = styled.button`
  height: 50px;
`


const ButtonLoading(){

const refButton = useRef<HTMLButtonElement | null>(null);    
    return(
      <Button ref={refButton} onClick={onClick} >
        {refButton.current?.clientHeight === 50 ? <SpinnerOne /> : <SpinnerTwo />}
      </Button> )
}

【问题讨论】：

设置 ref 后不会重新渲染。 clientHeight === 50 似乎非常具体。这里到底发生了什么？为什么会特别是 50？我闻起来就像你在别处设置了这个高度。是这样吗？
是的，我有一个设置为 50px 高度的按钮样式组件和另一个设置 60px 高度的组件，默认情况下，该组件应在其返回中使用 50px。我编辑了我的代码以显示示例
我的意思是，您正在逆转这里的信息流。您正在使用隐含在渲染 DOM 中的信息作为一种辅助的推断状态。这绝不是个好主意。实际应用程序状态中必须有一些信息导致此按钮以一种或另一种方式呈现。为什么你不能使用相同的信息来推动这个决定？
朋友，我有几个组件继承自同一个组件。这个继承的每个变体都有不同的高度，但是我根据父组件的状态来渲染它们。

标签： javascript reactjs typescript react-native

【解决方案1】：

我认为获取元素的高度更容易......无论如何你不能使用 ref 来做到这一点。

您必须将ReactDOM.findDOMNode 与 ref 结合使用。

但这还不够，因为您还必须将此值存储到状态变量中，以便在 React 首次渲染按钮（以获取高度）后主动重新渲染。

所以代码是：

const [height, setHeight] = useState(); //<-- this to store the height

let refButton = useRef(); //<-- here the ref

useEffect(() => {  //<-- here useEffect to store height into state var
    setHeight(ReactDOM.findDOMNode(refButton.current).getBoundingClientRect().height);
  }, []);

然后是渲染：

<button
   ref={refButton1}
   style={{ height: 50 }}
   type="button"
   onClick={() => {}}
>
   {height === 50 ? "A" : "B"}
</button>

我用 2 个按钮做了一个示例：1 个高度 = 50，另一个高度 = 51。Here 代码框

【讨论】：

是的，我已经在这样使用它了，这是一个错字。但是还是不行
非常感谢，我这里试试，很好的解释！！