Javascript 无法使用React.js refs滚动到div的底部

嗨，我正在构建一个应用程序，其中有一个列表，在组件挂载上，我总是想进入列表的底部

这是我的

render

方法

<div className="message-placeholder" 
                 ref={this.myRef}>
                <List
                    dataSource={this.state.data}
                    renderItem={item => (
                    <List.Item key={item.id}>
                        <List.Item.Meta
                            avatar={<Avatar style={{ backgroundColor: '#08c' }} icon="user" />}
                            title={<a href="#">{item.name}</a>}
                            description={item.message}
                        />
                    </List.Item>
                    )}
                >
                    {this.state.loading && this.state.hasMore && <Spin className="demo-loading" />}
                </List>

我的css看起来像这样

.message-placeholder {
    height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

现在，每当组件更新时，我都会尝试进入列表的底部。我是这样做的

componentDidUpdate() {
        this.scrollToBottom();
    }

scrollToBottom = () => {
        this.myRef.scrollIntoView({block: 'end', behavior: 'smooth'});
    }

但是，这不起作用，我得到以下错误

\u this.myRef.scrollIntoView不是一个函数

---

有人能帮我解决这个问题吗。提前感谢。：）

您可以使用此选项将特定部分滚动到

底部

document.querySelector(".message-placeholder").scrollTo(0,document.querySelector(".message-placeholder").scrollHeight);

并且

scrollIntoView

没有良好的浏览器兼容性检查此项

---

.

我建议使用像

{this.myRef=ref；}}>

您能否提供更多关于代码的详细信息？

document.querySelector(".message-placeholder").scrollTo(0,document.querySelector(".message-placeholder").scrollHeight);

<div className="message-placeholder" ref={(ref) => { this.myRef = ref; }}>