React Clamp.js не применяется, когда контент загружается асинхронно

Question

Я использую реагирующий зажим https://www.npmjs.com/package/react-clamp который используетобытный зажим.

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

Это прекрасно работает, если this.props.events установлен статически, но эти события выбираются асинхронно, а события отображаются при загрузке. По какой-то причине Clamp не применяется повторно. Может ли это быть как-то связано с тем, что слушатели событий не связываются правильно на втором рендере?

Обновление Просматривая код, он отображает элемент без изменений и не применяет зажим до вызова componentDidUpdate. Когда я использую зажим для элемента, который получает статический подпор, вызывается componentDidUpdate (хотя я не уверен почему, так как я не вижу никакой причины, по которой элемент обновляется. Когда данные поступают через избыточный код, componentDidUpdate никогда не вызывается, поэтому зажим не применяется. Может ли это быть связано с компонентом Reaction-redux, реализующим компонент ShouldUpdate?

Answer 1

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

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>
        );
    }
}