react里使用ref的几种方法

• Z时代
• 2024-01-10
• 分类：综合

方法一：类似vue的写法，标签里定义一个$ref ，然后通过this.refs.xxx获取dom

  {/* 方法一：类似vue的写法 */}
                <span ref="test">test</span>

 // 获取ref只能在componentDidMount里
    componentDidMount(){
        console.log(this.refs.test); // 这里不是$refs啊，没有$的，vue的才有
    }

方法二：

 {/* 方法二：xxx=>this.yyy=xxx */}
                <span ref={test2=>this.haha=test2}>test2</span>

  // 获取ref只能在componentDidMount里
    componentDidMount(){
   console.log(this.haha);
    }

方法三：接收React.createRef()的值

 {/* 方法三：接收React.createRef*()的值 */}
                <span ref={this.test3}>test3</span>

在constructor里使用React.createRef

constructor(props) {
        super(props);
        // React.createRef()
        this.test3 = React.createRef()
        this.state = {  }
    }

要用current访问dom

   // 获取ref只能在componentDidMount里
    componentDidMount(){
        console.log(this.haha);
    }

以上是 react里使用ref的几种方法 的全部内容， 来源链接： utcz.com/z/382642.html