Reaction Clamp.js wird nicht angewendet, wenn Inhalte asynchron geladen werden

Question

Ich verwende react clamp https://www.npmjs.com/package/react-clamp, die clamp.js hinter den Kulissen verwendet.

this.props.events.map((event,i) => { 
    return <div key={i}> 
     <Clamp clamp={2}>The is a really long event name</Clamp> 
    </div> 
}) 

Dies funktioniert gut, wenn this.props.events statisch festgelegt ist, aber diese Ereignisse sind asynchron und die Ereignisse geholt in bekommen gemacht wird, wenn sie geladen werden. Aus irgendeinem Grund wird Clamp nicht erneut angewendet. Könnte das etwas damit zu tun haben, dass Event-Listener beim 2. Render nicht korrekt gebunden werden?

aktualisieren den Code der Suche durch, macht es das Element ohne Änderungen, und gilt nicht Klemme bis componentDidUpdate genannt wird. Wenn ich clamp für ein Element verwende, das es statisch repliziert, wird componentDidUpdate aufgerufen (obwohl ich mir nicht sicher bin, warum, da ich keinen Grund sehe, warum das Element aktualisiert wird. Wenn die Daten redux sind, ist componentDidUpdate nie aufgerufen, daher wird clamp nicht angewendet.Könnte das mit react-redux zu tun haben, das componentShouldUpdate implementiert?

Answer 1

Beendet meine eigene Komponente zu schreiben, um clamp.js direkt zu verwenden und es funktioniert gut. Auslösen von clamp.js sobald die Komponente montiert. Es werden keine Updates für diese Komponenten sein, damit ich nicht componentDidUpdate umgesetzt habe, aber ich konnte einfach nicht so.

class Clamp extends Component { 

    componentDidMount(){ 
     if (this.container.length) { 
      throw new Error('Please provide exactly one child to clamp'); 
     } 

     clamp(this.container, { 
      clamp: this.props.clamp, 
      truncationChar: this.props.truncationChar, 
      useNativeClamp: this.props.useNativeClamp 
     }); 
    } 

    render() { 
     return (
      <div ref={(div) => this.container = div}>{this.props.children}</div> 
     ); 
    } 
}