React PerfectScrollBar 在容器底部滚动以获取动态生成的内容答案

【问题标题】：React PerfectScrollBar scroll at bottom of container for dynamically generated contentReact PerfectScrollBar 在容器底部滚动以获取动态生成的内容
【发布时间】：2019-11-23 06:51:38
【问题描述】：

我正在使用 react perfectscrollbar https://www.npmjs.com/package/react-perfect-scrollbar

我正在尝试实现聊天功能，在点击用户时，聊天消息通过 ajax 请求并放置在 DOM 中。在这里，我希望容器在底部滚动。

我已经在 react 中实现了下面的代码，但它似乎不起作用。蚂蚁的想法？注意：我已经过滤了代码，只粘贴了相关部分。我已经为 scrollTop 使用了建议的方法，但它不起作用。

 class Complain extends Component {
    constructor(props) {
        super(props);
        
        this.chatContainerRef = React.createRef();

    }
    
        viewComplain(e, id, name) {
        axios.get('/complain/' + id, {

        })
            .then(res => {
                const chatmsg = res.data.data;
                // let data = { msgdata: chatmsg, name: name, complainid: id };
                this.setState({ chatmsg: chatmsg });
                this.setState({ complainname: name });
                this.setState({ activeChat: id });
                this.setState({ complainRegNo: chatmsg[0].regno });
                console.log(this.chatContainerRef);
                this.chatContainerRef.current.scrollTop = 200;  // -> this is not working
            })
            .catch(function (error) {

            });
    }

render(
return {
    
 <PerfectScrollbar option={{ suppressScrollX: false }} ref={this.chatContainerRef}>
       {
              this.state.chatmsg.map((post, i) => (
                  <div key={i} className={(post.msg_creater === "school") ? "row flex-nowrap message-row contact p-4" : "row flex-nowrap message-row user p-4"}>
                  <img className="avatar mr-4" src="../assets/images/avatars/profile.jpg" alt="" />
                  <div className="bubble">
                      <div className="message">{post.msg}</div>
                      <div className="time text-muted text-right mt-2">{post.created_at}</div>
                  </div>
              </div>
           ))
       }
      </PerfectScrollbar>
})

【问题讨论】：

1) 你为什么对每个状态值使用不同的 setState（附带问题）2) 你能提供托管示例吗？
1) 是的，它可以在单个 setState/ 中使用，但是对于这个问题中的 react-perfect-scrollbar，现在在 scrollTop 上值得关注。你能帮帮我吗？
scrollTop 可以是相对的。只有在应用 CSS（在任何类型的托管示例中）之后，我才能提供帮助

标签： javascript html reactjs perfect-scrollbar

【解决方案1】：

我希望这个示例对您有所帮助：

import React, { useEffect, useState } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';


const Messages = () => {
    const [scrollEl, setScrollEl] = useState();

    useEffect(() => {
      if (scrollEl) {
        scrollEl.scrollTop = 100;
      }
    }, [scrollEl]);

    return (
            <PerfectScrollbar
              containerRef={ref => {
                setScrollEl(ref);
              }}
              >
            {/* ............. */}
              </PerfectScrollbar>
  );
};

export default Messages;

【讨论】：

【解决方案2】：

另一个简单的选择是在内容底部添加一个跨度，然后将其滚动到视图中。

注意：我无法让 Scrollbar 上的 containerRef 道具正常工作，因此这是下一个最佳选择。

import React, { useLayoutEffect, useRef } from 'react';
import Scrollbar from 'react-perfect-scrollbar';

...

const MyComp: FunctionComponent = () => {
  const scrollRef = useRef<HTMLSpanElement>();
  
  useLayoutEffect(() => {
    if (scrollRef?.current) {
      scrollRef.current.scrollIntoView();
    }
  });
  
  return (
    <Scrollbar>
      {_.map(data, (d) => renderItem(d))}
      <span ref={scrollRef} />
    </Scrollbar>
  ) 
 }

【讨论】：

【解决方案3】：

RPS 在其 ref 上公开了一个方法 updateScroll（不要与“containerRef”混淆！！）。

您需要在内容更改后调用它。

【讨论】：

一些示例代码或文档链接实际上在这里会有很大帮助