如何使用ReactJS

Question

我想知道ReactJS如何强制上下滚动可滚动区域。

我的示例显示了两个我希望在灰色可滚动区域上下滚动的按钮。

使用ReactJs是否可以实现？

此外，如何知道滚动区域是否在限制范围内，以在滚动区域顶部或滚动区域底部时禁用UP和DOWN按钮？

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Test.css";

class Button extends Component {
    static propTypes = {
        onClick: PropTypes.func.isRequired,
        text: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired
    };

    handleClick = () => {
        this.props.onClick(this.props.id);
    };

    render = () => {
        return (
            <div class="button-container" onClick={this.handleClick}>
                {this.props.text}
            </div>
        );
    };
}

class Test extends Component {
    handleClick = id => {
        alert("OK. How to scroll " + id + " the left greyed area from this button?");
    };

    render = () => {
        let lines = [];
        [...Array(100)].map((line, index) => {
            lines.push(<div>{"This is line number " + index}</div>);
        });

        return (
            <div className="test-container">
                <div className="test-container-left">
                    <div
                        ref={"data-container"}
                        className="test-container-left-top"
                    >
                        {lines}
                    </div>
                    <div className="test-container-left-bottom">
                        Bottom MENU
                    </div>
                </div>
                <div className="test-container-right">
                    <Button text={"UP"} id={"up"} onClick={this.handleClick} />
                    <Button
                        text={"DOWN"}
                        id={"down"}
                        onClick={this.handleClick}
                    />
                </div>
            </div>
        );
    };
}

export default Test;

CSS：

.test-container {
    background-color: red;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.test-container-left {
    flex-grow: 1;
    height: 100vh;
    background-color: green;
    display: flex;
    flex-direction: column;
}

.test-container-left-top {
    flex-grow: 1;
    background-color: grey;
    overflow-y: auto;
}

.test-container-left-bottom {
    background-color: yellow;
    height: 200px;

}

.test-container-right {
    background-color: yellow;
    display: flex;
    flex-direction: column;
}

.button-container {
    background-color: blue;
    color: white;
    min-width: 150px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3px;
}

.button-container:hover {
    background-color: grey;
    color: white;
}