javascript – 在使用clamp.js的React中的线夹,导致IE11中出现Object错误

2019年7月21日 348次阅读

目标：当任务描述对于它的容器超过两行时,让浏览器呈现溢出文本省略号外观,而不是当它不是时.

Click here for a screenshot of desired outcome.

以下是我的React组件,我们导入的夹具是https://github.com/josephschmitt/Clamp.js的本地副本

import React from 'react'
import clamp from 'client/util/clamp'
import { findDOMNode } from 'react-dom'

const TextDescription = ({ name, description, dueDate }) => {
  return (
    <div>
      <div className='desc-text' ref={(clampee) => {clampee && clamp(findDOMNode(clampee), { clamp: 2 })}}>
        <strong>{name} Task: </strong> {description}.
      </div>
      <div>
        Due: {dueDate}
      </div>
    </div>
  )
}

这完全在Chrome中工作(见上面的截图),因为它是webkit浏览器,甚至没有从clamp.js进入getLastChild函数的有问题代码区域,但在IE11中我收到与此行有关的错误来自clamp.js的#122链接到上面.

错误：

[object Error] {description: "Unable to get property 'children' of undefined or null reference", name: "TypeError", number: "-2146823281"}

我已经看过这个帖子https://github.com/josephschmitt/Clamp.js/issues/24并尝试了他们的建议,明确指定了clamp参数并设置了CSS：

.desc-text
  display: block;
  line-height: 18px;
  margin-top: -20px;

我们还尝试从clamp.js(上面链接)修改第117行,以包含elem.lastChild,所以它现在是：

if (elem.lastChild && elem.lastChild.children && elem.lastChild.children.length > 0) { ...

因此,如果进入下一个错误,则会产生稍微不同的错误：

[object Error] {description: "Unable to get property 'parentNode' of undefined or null reference", name: "TypeError", number: "-2146823281"}

任何人都知道如何让线钳在IE中工作？

最佳答案 在React应用程序中使用与此类交互的库可能会出现问题.我有更好的运气坚持反应特定库或构建我自己的组件.

我最近不得不实现一个跨浏览器线夹(IE10),并对我在那里找到的任何东西都不满意,所以我自己动手.我开始使用clamp.js逻辑并从那里调整它以获得性能和准确性.基本的方法是修剪弦,直到元素达到所需的高度,然后你就可以确切地知道有多少个字符可以适合并可以根据需要进行修剪以显示省略号或修剪到最后一个单词.让它变得快速和顺利渲染需要一些技巧和时间.如果你想更具体地看一下我的实现,或者试试我的npm包,请看看这里：https://github.com/bsidelinger912/shiitake.

点赞