需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，
一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，
再跳到对应的文档
image.png
跟想象中的一样，确实ref上的属性变化了，没法通知到我们。
那是因为ref有两种使用方式，
一种是useRef();
一种是通过回调的方式，比如
<div ref={(ref)=>this.ref=ref}></div>
这种回调的方式可以在每次属性变化的时候监听到，每次都会触发这个回调函数
这里用了useCallback只是为了节省性能而已
https://react.docschina.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对...
scrollHeight：DOM元素的实际内容的高度，不包border的高度，会随DOM元素中内容的增加(超过可视...
React根据JS对象构造的元素生成虚拟Dom树，对比虚拟Dom节点的变化来渲染真正的Dom树 因为传统Dom树的...
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 要将React元素渲染到根DOM节点中，我们...
React元素的事件处理和DOM元素的区别 React元素的事件处理和DOM元素相似，但语法上有些不同： Reac...
不同于浏览器的 DOM 元素， React 元素是普通的对象，非常容易创建。React DOM 会负责更新 DOM...
元素是构成React的最小单位,用于描述屏幕上输出的内容,但是他有别于浏览器的DOM元素,React中元素就是普通...
元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。与浏览器的 DOM 元素不同，React...
虚拟DOM和diff算法 React更新视图的思想是：只要state变化就重新渲染视图。组件中只有一个DOM元素需...
一、react操作页面元素的途径 react使用数据绑定操作dom，如果绑定的数据多了，那么dom元素就多了；删除...
本文标题：React 监听子元素dom内容高度变化
本文链接：https://www.haomeiwen.com/subject/dfqstktx.html
网友评论