在React with Hooks和redux中计算javascript中的文本行

我一直在寻找实现一个解决方案，使用React钩子和Redux计算React（用Typescript编写）中元素的行

我从成员那里找到并喜欢的一个jquery实现，它有9票，唯一的原因是

“适用于所有浏览器，但很少有功能超出标准。”

在我目前从事的项目中，我们也实现了jquery（不要问为什么我们将两者混为一谈，这不是我们的决定）。。。因此，最初我尝试在jquery中使用它。而且很有效！！下面的代码完成了这项工作

const calculate=（obj:JQuery）=>{
设cloned=obj.clone（true，true）；
cloned.html（'a
b'）.hide（）.appendTo（parentClass）；
设大小=克隆？.height（）！/2；
克隆。删除（）；
设noOfLines=obj？.height（）！/size；
return Math.trunc（noOfLines）；
}
addEventListener（“调整大小”，（）=>{
let element=$（“#calculateLines”）；
if（元素）{
让线=计算（元素）；
控制台日志（行）；
}
});

然而，我真的很想尝试“翻译”这个，而不是使用jquery

因此，我有以下片段：

const calculateNotInJQuery=（obj:HTMLElement）=>{
将clone=obj.cloneNode（true）作为HTMLElement；
让tempElement=document.createElement（'p'）；
tempElement.innerHTML=“a

b”；
setAttribute（“类型”、“隐藏”）；
让parentElement=document.getElementById（'someParentClass'）；
克隆的.appendChild（tempElement）
parentElement？.appendChild（克隆）；
设size=cloned.clientHeight/2；
克隆。删除（）；
设noOfLines=（（obj.clientHeight/size）；
return Math.trunc（noOfLines）；
}
addEventListener（“调整大小”，（）=>{
let element=$（“#calculateLines”）；
if（元素）{
让线=计算（元素）；
控制台日志（行）；
}
});

最后一行始终返回1。如果我删除Math.trunc，它将接受从0到1的值。 我知道我很难“翻译”这句话：

cloned.html('a<br>b').hide().appendTo(parentClass);

cloned.html（'a
b'）.hide（）.appendTo（parentClass）；

我认为它说的是：我们为克隆的节点创建一些html，隐藏它，然后将它附加到父元素

所以我试着做一些类似的事情，但我不知道我的逻辑哪里错了：

   let cloned = obj.cloneNode(true) as HTMLElement;

        let tempElement = document.createElement('p');
        tempElement.innerHTML = "a<br></br>b";
        tempElement.setAttribute("type", "hidden");

        let parentElement = document.getElementById('someParentClass');
        cloned.appendChild(tempElement)

        parentElement?.appendChild(cloned);

let cloned=obj.cloneNode（true）作为HTMLElement；
让tempElement=document.createElement（'p'）；
tempElement.innerHTML=“a

b”；
setAttribute（“类型”、“隐藏”）；
让parentElement=document.getElementById（'someParentClass'）；
克隆的.appendChild（tempElement）
parentElement？.appendChild（克隆）；

我们将一如既往地感谢您的任何建议。 提前谢谢你

[编辑]

根据他的建议，我创建了解决方案，还创建了一个沙盒，因为它似乎有什么问题

沙箱是一个很好的工具

发生的事情是

当按钮设置为“阅读更多”时，当我调整窗口大小时，线条计算正确。按钮按其应有的方式隐藏或显示

现在我点击阅读更多，所有文本都显示出来，正确的计算行可见。我们现在有了“阅读更少”的标签

当我调整窗口大小时，显示“无读”描述和所有文本，计算结果不正确。 例如，我可以有5行视觉，但计算给我7行

我现在做错了什么？

---

在展开和收拢文本之间发生了什么，使我的行数出现了错误？

您提到的答案的主要思想是：

克隆原始元素

将其内容替换为两行文本

找到更改后元素的高度并将其除以二-这是假定的线高度

将元素的实际高度除以假定的线高度，以找到线的数量

通过创建自定义挂钩，可以获得相同的结果：

使用

useRef（）

存储对容器的引用

在

useffect（）

中，计算容器的高度，然后除以假定的行高度（在“getLineHeight”中计算）

设置

numberOfLines

状态

注意：您可能应该对

countLines

函数进行去盎司/节流，因为

resize

事件被多次调用，重复添加、测量并从DOM中删除元素会给UI线程带来压力

const{useRef，useState，useffect}=React；
常量getLineHeight=el=>{
常数cl=el.cloneNode（）；
cl.style.visibility='隐藏'；
cl.style.position=‘绝对’；
cl.innerHTML='a
b'；
文件.正文.附件（cl）；
const{height}=cl.getBoundingClientRect（）；
cl.删除（）；
返回高度/2；
};
常量useCountLines=（）=>{
const targetRef=useRef（）；
常量[numberOfLines，setNumberOfLines]=useState（null）；
useffect（（）=>{
常数countLines=（）=>{
如果（！targetRef.current）返回；
const{height}=targetRef.current.getBoundingClientRect（）；
const lineHeight=getLineHeight（targetRef.current）；
setNumberOfLines（Math.trunc（高度/线宽））；
};
countLines（）；
window.addEventListener（'resize'，countLines）；
return（）=>{
removeEventListener（'resize'，countLines）；
};
}, []);
返回[numberOfLines，targetRef]；
}
常量演示=（）=>{
常量[numberOfLines，targetRef]=useCountLines（）；
控制台日志（行数）；
返回(
Lorem ipsum dolor sit amet，在odio ultricies tortor aliquet moll公司担任高级顾问