Зажим строки в React с использованием зажим.js, вызывающий ошибку объекта в IE11

Question

Цель: сделать так, чтобы браузер отображал многоточечный текстовый многоточие, когда описание задачи содержит более двух строк для контейнера, а не когда это не так.

Нажмите здесь для скриншота желаемого результата.

Вот мой компонент 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>
  )
}

This is completely working in Chrome (see screenshot above) because it is it webkit browser and doesn't even enter this area of problematic code in the getLastChild функция от clamp.js, но в IE11 я получаю сообщение об ошибке, связанной с этой строкой #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 и попробовал их предложения с явным указанием параметра зажима и установкой CSS как таковой:

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

Мы также попытались изменить строку № 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?

Answer 1

Использование таких библиотек, которые взаимодействуют с DOM, может быть проблематичным в приложении React. Мне повезло, что я придерживался специальных библиотек реагирования или создавал свои собственные компоненты.

Недавно мне пришлось внедрить кросс-браузерную линию (IE10+), и я не был доволен тем, что я там нашел, поэтому я сделал свой собственный. Я начал с логики зажима.js и отрегулировал ее для повышения производительности и точности. Основной подход состоит в том, чтобы обрезать строку до тех пор, пока элемент не достигнет желаемой высоты, тогда вы точно знаете, сколько символов может уместиться, и можете оттуда обрезать по желанию, чтобы показать многоточие или обрезку до последнего слова. Чтобы сделать это быстро и плавно, нужно немного времени и усилий. Посмотрите здесь, если вы хотите увидеть мою реализацию более подробно, или попробуйте мой пакет npm: https://github.com/bsidelinger912/shiitake.