Question

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

Answer 1

结束编写我自己的组件直接使用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>
        );
    }
}

当异步加载内容时，React Clamp.js不会被应用

1 个答案: