React 基础 - 11 （子元素绑定 ref）

能够通过绑定的变量操作子元素的方法和属性，vue中ref的概念

方式一：绑定的变量，需要提前声明，调用时需要取一层current

        son1 = React.createRef();

        useSon() {

                     console.log(this.son1.current.num);

             this.son1.current.show();

          }

        <Son ref={this.son1} />

方式二：直接绑定，不需要提前声明，箭头函数的el，就是当前组件，不需要写current

        useSon() {

                  console.log(this.son2.num);

                    this.son2.show()

          }

        <Son ref={el => (this.son2 = el)} />

import React, { Component } from "react";

export default class App extends Component {
  //方式一：提前声明一个变量
  son1 = React.createRef();
  useSon() {
    //方式一：通过提前声明变量的方式，需要取一层current
    console.log(this.son1.current.num);
    this.son1.current.show();

    //方式二：不需要写current
    console.log(this.son2);
    console.log(this.son2.num);
    this.son2.show()
  }
  render() {
    return (
      <div>
        <button  onClick={() => { this.useSon() }}> 触发调用子元素的方法 </button>

        {/* 方式一：绑定的变量，需要提前声明 */}
        <Son ref={this.son1} />

        {/* 方式二：直接绑定，不需要提前声明   箭头函数的el，就是当前组件 */}
        <Son ref={el => (this.son2 = el)} />
      </div>
    );
  }
}

class Son extends Component {
  num = 5;
  show() {
    alert("我是子组件的show方法");
  }
  render() {
    return <div>我是子组件 Oo..oO</div>;
  }
}

标签：11,current,show,绑定,React,son1,son2,num,ref
来源： https://blog.csdn.net/Janicecat/article/details/121960264