我正在向文本区域添加文本,然后尝试滚动到底部以保持最新内容可见。但是,在执行此操作时,似乎会使浏览器崩溃/内存不足。有人能帮助优化这段代码吗?
//Appending text and calling scroll function
this.setState({ transcriptText: this.state.transcriptText + resp.log })
this.scrollToBottom();
//Textarea
<TextArea
ref={textLog => this.textLog = textLog}
autosize={{ minRows: 10, maxRows: 15 }}
value={this.state.transcriptText}
>
</TextArea>
//Scrolling
scrollToBottom = () => {
const textLogContainer = ReactDOM.findDOMNode(this.textLog);
if(textLogContainer){
textLogContainer.scrollTop = textLogContainer.scrollHeight;
}
};
完整的
componentDidMount() {
const socket = io.connect(process.env.REACT_APP_API_URL, { transports: ['websocket'] });
socket.emit('onboarding', { id: uploadId });
socket.on('transcript_log', function (resp) {
this.setState({ transcriptText: this.state.transcriptText + resp.log })
this.scrollToBottom();
}.bind(this));
}
谢谢
.current
属性是什么?原来添加这个属性是使它正常工作所必需的。” - MathKid