5

目标：让浏览器在任务描述超过两行时响应式地呈现溢出文本省略号，而不是在没有时。

单击此处获取所需结果的屏幕截图。

下面是我的 React 组件，clamp我们正在导入的是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 浏览器，甚至没有在getLastChild函数中输入这个有问题的代码区域clamp.jsfrom .js 上面链接。

错误：

[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) { ...

结果在进入下一个 if 时会出现稍微不同的错误：

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

有人知道如何让线夹在 IE 中工作吗？

4

1 回答 1

3

在 React 应用程序中使用像这样与 DOM 交互的库可能会出现问题。坚持使用特定的反应库或构建自己的组件时，我的运气会更好。

我最近不得不实现一个跨浏览器线夹（IE10+）并且对我在那里发现的任何东西都不满意，所以我自己动手。我从clamp.js 逻辑开始，并从那里调整它以提高性能和准确性。基本方法是修剪字符串，直到元素达到所需的高度，然后您确切知道可以容纳多少个字符，并且可以根据需要从那里修剪以显示省略号或修剪到最后一个单词。让它变得快速和流畅地渲染需要一些技巧和时间。如果您想更具体地查看我的实现，请看这里，或者试试我的 npm 包：https ://github.com/bsidelinger912/shiitake 。

于 2016-07-25T06:52:22.877 回答