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;

       }