Question

我正在使用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>
})

Answer 1

我希望该示例对您有帮助：

from sklearn.cluster import KMeans
from pandas import DataFrame
from sklearn import metrics
import numpy as np

Data = {'e' : [3, 1, 1, 2, 1, 6, 6, 6, 5, 6, 7, 8, 9, 8, 9, 9, 8],
'r' : [5, 4, 6, 6, 5, 8, 6, 7, 6, 7, 1, 2, 1, 2, 3, 2, 3]}

df = DataFrame(Data, columns=['e','r'])
print(df)

kmeans2 = KMeans(n_clusters=1650).fit(df)
centroids = kmeans2.cluster_centers_
print(centroids)
plt.scatter(df['e'], df['r'], c=kmeans2.labels_.astype(float), s=50, alpha=0.5)
plt.scatter(centroids[:,0], centroids[:,1], c='blue', s=50)
plt.show()

Answer 2

RPS在其引用上公开方法updateScroll（不要与“ containerRef”相混淆！）。

您需要在内容更改后致电。

在容器底部反应PerfectScrollBar滚动以获取动态生成的内容

2 个答案: