使用 React 自动滚动 div

Question

div 包含动态日志内容 (props.logs)，如何自动滚动到底部？

  <div className='rc_logsContent' ref={logsRef}>
    <Collapse isOpened={isOpened} >
       <p
         dangerouslySetInnerHTML={{__html: formatNote(props.logs)}}
       />
    </Collapse>
  </div> 

Answer 1

问题是您将 ref 传递给呈现组件的 div 元素。我建议您在内容末尾使用虚拟 div，然后在组件更新时滚动到该内容。只需检查此修改后的代码。

<div className="rc_logsContent">
  <Collapse isOpened={isOpened}>
    <p dangerouslySetInnerHTML={{ __html: formatNote(props.logs) }} />
    <div ref={logsRef} />
  </Collapse>
</div>;

附加一个具有相同滚动功能的沙盒。您可以根据自己的需求进行查看和修改。