Line Clamp in React mit clamp.js verursacht Objektfehler in IE11

Question

Ziel: Lassen Sie Browser eine Überlauftext-Ellipse reagieren reagieren, wenn Task Beschreibung über zwei Zeilen für den Container ist, nicht wenn es nicht ist.

Click here for a screenshot of desired outcome.

Hier ist meine Reaktion Komponente unten, die clamp wir importieren, ist eine lokale Kopie von 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> 
) 
} 

Das komplett in Chrome arbeiten (siehe Abbildung oben), weil es es webkit ist Browser und nicht einmal diesen Bereich problematischen Code in der getLastChild Funktion von clamp.js eingeben, aber in IE11 bekomme ich einen Fehler in Bezug auf diese Linie # 122 von clamp.js oben verlinkt.

Fehler:

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

ich ausgesehen haben bereits auf diesen Thread https://github.com/josephschmitt/Clamp.js/issues/24 und versucht, ihre Vorschläge mit den Klemm Parameter explizit spezifiziert und die Einstellung der CSS als solche:

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

Wir haben auch versucht Linie Modifizieren # 117 von clamp.js (oben verlinkt) mit elem.lastChild, so ist es jetzt:

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

Und als Ergebnis ein etwas anderen Fehler erhalten, wie es die, wenn nächstes eintritt:

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

Wer weiß, wie Leitungsklemme zu bekommen in IE zu arbeiten?

Answer 1

Die Verwendung von Bibliotheken, die mit dem DOM interagieren, kann in einer React-Anwendung problematisch sein. Ich hatte mehr Glück mit reaktionsspezifischen Bibliotheken zu bleiben oder meine eigenen Komponenten zu bauen.

Ich musste vor kurzem eine Cross-Browser-Line-Clamp (IE10 +) implementieren und war nicht glücklich mit irgendetwas, was ich dort gefunden habe, also habe ich meine eigenen gerollt. Ich habe mit der Logik von clamp.js begonnen und von dort aus die Leistung und Genauigkeit optimiert. Der grundlegende Ansatz besteht darin, die Zeichenfolge zu trimmen, bis das Element die gewünschte Höhe hat, dann wissen Sie genau, wie viele Zeichen passen können, und können von dort aus trimmen, um eine Ellipse anzuzeigen oder das letzte Wort zu trimmen. Um das schnell zu machen und flüssig zu rendern, bedarf es einiger Finesse und Zeit. Sehen Sie sich hier an, wenn Sie meine Implementierung genauer sehen möchten, oder versuchen Sie mein npm-Paket: https://github.com/bsidelinger912/shiitake.