React 监听子元素dom内容高度变化

Posted 2023-03-09

参考技术A 需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，

一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，

看到一个大佬的博客
https://blog.csdn.net/qq_36947128/article/details/104617867?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

再跳到对应的文档

跟想象中的一样，确实ref上的属性变化了，没法通知到我们。
那是因为ref有两种使用方式，
一种是useRef();
一种是通过回调的方式，比如

这种回调的方式可以在每次属性变化的时候监听到，每次都会触发这个回调函数
这里用了useCallback只是为了节省性能而已
https://react.docschina.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node