如何在阅读更多时让阅读更显眼?

时间:2021-03-25 20:15:04

标签: javascript html reactjs

我有一个多读和少读的切换器功能,它可以在使用 if 功能时展开和折叠模式

if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // your element have overflow
  element.style.background = "yellow";
}
else{
  //your element don't have overflow
}

它检查是否溢出,因此它正在更新我的组件类并显示阅读更多按钮我需要在渲染时运行此功能,因为如果 QA 团队将我的组件传送到移动屏幕,因此文本需要根据要求显示

Issue 当函数说它溢出时,我设置了显示多读和少读按钮的条件,但问题是当有人点击多读时,高度会更新,它与偏移高度相似,我的多读少读按钮得到根据条件消失,第一个解决方案是将这个高度检查条件放在 useEffect 中渲染它只运行一次所以我的按钮没有消失,因为它不会再次计算高度但是当 QA 检查它时使用控制台响应视图查看组件不会因为 useEffect 而更新,所以是否有任何其他条件我用来计算阅读更多按钮不会在切换时消失,但是当您的高度超过响应式视图时,它需要消失。< /p>

总结: 我使用相同的 isOverflow 状态来显示 ReadMore 按钮,但客户希望通过控制台响应视图来检查它,并且需要像媒体查询断点这样的更改

0 个答案:

没有答案