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

Question

您好，我正在构建一个应用程序，其中有一个列表，在组件安装时我总是想转到列表的底部。

这是我的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>

在我的构造函数中，我创建了一个新的引用。像这样

constructor(props){
        super(props);
        this.myRef = React.createRef();

我的 CSS 看起来像这样。

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

现在，每次组件更新时，我都会尝试转到列表底部。以下是我的做法。

componentDidUpdate() {
        this.scrollToBottom();
    }

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

但是，这不起作用我收到以下错误 _this.myRef.scrollIntoView is not a function

有人可以帮我解决这个问题吗？提前致谢。 :)

Answer 1

您可以使用它来将特定部分滚动到底部

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

并且 scrollIntoView 没有很好的浏览器兼容性检查这个 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility .