React 中 ref 的使用

发布时间：2020-12-15 09:29:11 所属栏目：百科来源：网络整理

导读：实例：获取button元素离页面顶部的距离 ref写在html元素上 import React,{Component,Fragment} from 'react' ;import Child from './Child' ;class Counter extends Component{ constructor(props){ super(props); this .addCount= this .addCount.bind( thi

实例：获取button元素离页面顶部的距离

ref写在html元素上

import React,{Component,Fragment} from 'react';
import Child from './Child';

class Counter extends Component{

    constructor(props){
        super(props);
        this.addCount=this.addCount.bind(this);

        this.state={
            counter:1
        }
    }

    addCount(){
        console.log(.button);
        console.log(.button.clientTop);

        .setState({
            counter:this.state.counter+1
        })
    }

    render(){
        return(
            <Fragment>
                <button onClick={this.addCount} ref={button=>this.button=button}>点击</button>
                <Child num={this.state.counter}/>
            </Fragment>
        )
    }
}

export default Counter;

ref写在组件上，获取的是组件的实例

import React,1)">.child);

        this.addCount}>点击</button>
                <Child num={this.state.counter} ref={child=>this.child=child}/>
            </Fragment>
default Counter;

总结：ref写在html标签上，获取的是DOM节点

ref写在组件标签上，获取的是组件的JS实例

setState异步，实例：

import React,1)">.div.innerHTML);

        
        })

        console.log(.div.innerHTML);
    }

    render(){
        this.addCount}>点击</button>
                <div ref={div=>this.div=div}>{this.state.counter}</div>
            </Fragment>
default Counter;

可以看到两次输出的都是1，证明setState操作是异步执行的

解决方法：

import React,1)">this.setState(()=>{
            {
                counter:
            }
        },()=>{
            console.log(.div.innerHTML);
        })
    }

    render(){
        default Counter;

这种写法，第二次打印会在setState执行完毕之后再执行

结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!