0

我正在使用 react clamp https://www.npmjs.com/package/react-clamp，它在幕后使用了 clamp.js。

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 之前不应用钳位。当我在静态获取它的道具的元素上使用clamp时，会调用componentDidUpdate（尽管我不确定为什么，因为我看不到元素会被更新的任何原因。当数据来自redux时，componentDidUpdate是从未调用过，因此不应用clamp。这可能与react-redux实现componentShouldUpdate有关吗？

4

1 回答 1

0

最终编写了我自己的组件以直接使用clamp.js，并且效果很好。组件安装后立即触发clamp.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>
        );
    }
}
于 2017-08-23T18:08:41.353 回答