保持元素滚动到底部

Question

我正在创建一个“日志”屏幕，该屏幕在React中定期更新。 为了确保始终能看到最新的内容，我希望元素始终滚动到底部：

我有溢出工作：

CSS：

div.log {
    height: 200px;
    overflow: auto;
}

和HTML：

JSX：

render() {

    return (

            <div className="log">
                <ul>
                    {this.props.log.map((log, i) =>

                        <li key={i}>
                            {log.message}
                        </li>
                    )}

                </ul>
            </div>

    );
}

这是我的整个组件：

使用Javascript

import React from 'react';

export default class Log extends React.Component {

    constructor(props) {

        super(props);

    }

    render() {

        return (

                <div className="log">
                    <ul>
                        {this.props.log.map((log, i) =>

                            <li key={i}>
                                {log.message}
                            </li>
                        )}

                    </ul>
                </div>

        );
    }

}

一切正常，但不会一直向下滚动。 我了解我可以使用类似于以下内容的东西：

 var element = document.getElementByClassName(".log");
 element.scrollTop = element.scrollHeight;

但这仅工作一次，当“ .log”的内容更新时，我需要滚动到底部。

任何帮助深表感谢。

Answer 1

您可以给Log组件的最顶部元素提供一个ref ，并确保当props在componentDidUpdate更新时，滚动到最底部。

例

 class Log extends React.Component { ref = React.createRef(); componentDidUpdate() { this.ref.current.scrollTop = this.ref.current.scrollHeight; } render() { return ( <div ref={this.ref} style={{ height: 50, overflowY: "scroll" }}> <ul> {this.props.log.map((log, i) => ( <li key={i}>{log.message}</li> ))} </ul> </div> ); } } class App extends React.Component { state = { logs: [] }; componentDidMount() { setInterval(() => { this.setState(prevState => { return { logs: [...prevState.logs, { message: Math.random() }] }; }); }, 1000); } render() { return <Log log={this.state.logs} />; } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>