【React学习】React中ref的用法

ref可以让react方便快捷地拿到DOM元素，ref的用法主要有两种。

用法1：回调形式的ref
在ref中传入一个回调函数，回调函数的默认参数就是元素对象，给组件加一个属性用来存储元素对象。

<div id="app"></div>    

<script type="text/babel">


    class Welcome extends React.Component{
        get=()=>{
            console.log(this.c.innerHTML)
        }
        render(){
            return(
                <div>
                    <div ref={a=>this.c=a}>hello</div>
                    <button onClick={this.get}>获取DOM元素</button>
                </div>
            )   
        }
    }
    
    ReactDOM.render(
        <Welcome/>,
        document.getElementById("app")
    )

</script>

方法2：React.createRef

<div id="app"></div>    

<script type="text/babel">


    class Welcome extends React.Component{
        constructor(){
            super()
            this.myRef = React.createRef()
        }
        get=()=>{
            console.log(this.myRef.current.innerHTML)
        }
        render(){
            return(
                <div>
                    <div ref={this.myRef}>hello</div>
                    <button onClick={this.get}>获取DOM元素</button>
                </div>
            )   
        }
    }
    
    ReactDOM.render(
        <Welcome/>,
        document.getElementById("app")
    )

</script>

效果