Question

我正在将文本添加到textarea，然后尝试滚动到底部以保持最新的视图。但是，在执行此操作时，我似乎崩溃了浏览器/内存不足。任何人都可以帮助优化此代码吗？

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

由于

Answer 1

如果您有参考，则无需执行ReactDOM.findDOMNode，将其更改为仅检查参考是否为空，然后更改scrollTop。

喜欢这个

scrollToBottom = () => {
    if(this.textLog){
        this.textLog.scrollTop = this.textLog.scrollHeight;
    }
};

Answer 2

使用较新的React.createRef()并使用componentDidUpdate()作为触发器会更容易：

constructor(props) {
    super(props);

    this.textLog = React.createRef();
}

componentDidUpdate() {
    this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
}

render() {
    return(
        <textarea ref={this.textLog} value={this.state.transcriptText} />
    );
}

React滚动到textarea的底部

2 个答案: