react中ref的使用
拿一个简单的例子来说明会更清楚一些，现在我们有两个组件，当前的需求是我想在父组件里面拿到子组件里面本身这个实例，这个官方文档的推荐做法是使用回调函数。我们先使用官方文档上面回调函数的方式来实现。代码如下。
import React, { Component } from "react";
import MyComponent from "./MyComponent";
class Father extends Component {
ref;
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
console.log(this.ref);
}
render() {
return (
<div>
<MyComponent ref={(ref)=>{this.ref=ref;}} />
</div>
);
}
}
export default Father;
从下图中可以看到,已经成功获取到我们子组件的实例了
image
但现在我们想在子组件里面使用表单，于是我们使用了ant-design的Form.create将我们的子组件包裹起来.
export default Form.create()(MyComponent);
然后我们想拿到我们的子组件本身，我们在通过同样的方式试试看，发生了什么。
image
唉？奇怪，为什么获取到的实例不对啊，仔细看看，可以看到，里面有很多 form 实例具有的的方法，说明我们拿到的是返回的高阶组件的实例。而不是我们组件的实例。
ref 是 无法获取到高阶组件包裹的低阶组件的
ref获取高阶组件包裹的低阶组件
父组件
class Father extends Component {
ref;
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
console.log(this.ref);
}
onRef=(ref)=>{
this.ref=ref;
}
render() {
return (
<div>
<MyComponent onRef={this.onRef} />
</div>
);
}
}
export default Father;
子组件
class MyComponent extends Component {
constructor(props) {
super(props);
props.onRef(this);
this.state={
}
}
render() {
return (
<div>
<Form>
<Button>按钮</Button>
</Form>
</div>
);
}
}
export default Form.create()(MyComponent);
看一下打印结果，这样就成功拿到子组件这个实例了
image
这样你就能对子组件进行一系列操作了,比如改变子组件的状态, 假设子组件有个 visible 状态控制子组件内部某部分的显示与隐藏, 这样你就可以在父组件中通过
this.ref.setState({visible: false});
来控制该部分的变化了.
ref的强大还待研究, 后续有新的学习再更新相关的内容了.
