React之設置元素的滾動條

       在React中，解耦了對DOM元素的操作，但有時我們確實需要對DOM操作，比如設置元素的滾動條，這時ref就滿足了我們的需求

       在低版本的react中，ref可以是一個string類型的屬性，通過this.refs.[refString]來獲取相應的DOM元素，但在高版本的react中已被棄用

       在高版本中的ref可以是React.createRef()創建ref屬性 ，也可以是回調函數，我們可以在構造函數中使用React.createRef()來創建一個ref屬性

       例如:   this.testRef = React.createRef(); // 創建ref屬性

                 <div ref={this.testRef} />  //將創建的ref屬性作為一個元素的ref

                 this.testRef.current //獲取元素

        ref 的更新會發生在componentDidMount 或 componentDidUpdate 生命周期鉤子之前，所以我們可以在componentDidMount 或 componentDidUpdate中處理業務需求

      註意：不能在函數式組件上使用 ref 屬性，因為它們沒有實例，但可以在函數式組件內部使用ref

      雖然不能在函數式組件上直接使用ref，但我們可以像組件之間傳遞參數一樣來傳遞ref

      例如:  render() {

                 const TestRefFunc = (props) => {

                     return (

                         <div ref={props.testRef}>

                     );

                  }

                    return (

                      <TestRefFunc  testRef={(el) => this.testRefEle = el} />

                    );

                }

        知道了在react中如何獲取DOM元素，那麼就可以對DOM元素操作，設置元素的滾動條，代碼如下

        componentDidMount() {   // 進入組件

            this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;

        }

        componentUpdateMount() {  // 刷新組件

           this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;

       }