能够通过绑定的变量操作子元素的方法和属性,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>;
}
}