Inject scrollArea to self element. about reactscrollbar HOT 7 CLOSED

class App extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            itemsCount : 10
        };
    }

    addItemsAndRefreshScroller(){
        this.setState({itemsCount: this.state.itemsCount + 10});
    }

    render() {
        var itemElements = [];

        for( var i = 0; i< this.state.itemsCount; i++){
            itemElements.push(<div className="item" key={i}>item {i}</div>);
        }

        return (
            <div>
                <ScrollArea
                  className="area"
                  contentClassName="content">

                    {itemElements}

                </ScrollArea>
                <input type="button" value="Add items" onClick={()=>this.addItemsAndRefreshScroller()}/>
            </div>
        );
    }
}

<ScrollArea defaultXPosition="bottom" >
</ScrollArea>

class App extends React.Component{
    scrollBotttom(){
        this.refs.scrollArea.scrollBottom();
    }

    render() {
        var itemElements = [];

        for( var i = 0; i< 10; i++){
            itemElements.push(<div className="item" key={i}>item {i}</div>);
        }

        return (
            <div>
                <ScrollArea
                  ref="scrollArea"
                  className="area"
                  contentClassName="content">

                    {itemElements}

                </ScrollArea>
                <input type="button" value="Scroll Bottom" onClick={()=>this.scrollBotttom()}/>
            </div>
        );
    }
}