当前第2页 返回上一页
1、constructor中onRef绑定this
1 | this .props.onRef( this )Copy to clipboardErrorCopied
|
完成以上4步骤,父组件中可以随便调用子组件中state的值以及方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | export class ParentCom extends React.Component<{}, {}> {
constructor(props:{}){
super (props);
this .onRef = this .onRef.bind( this );
}
public child: any;
onRef(ref:any){
this .child = ref;
}
getChildFun(){
this .child.testFun();
}
render(){
return (
<div>
<span>父组件</span>
<ChildCom onRef={ this .onRef}></ChildCom>
</div>
)
}
}
interface childProps{
onRef? : any
}
export class ChildCom extends React.Component<childProps, {}> {
constructor(props:{}){
super (props);
this .props.onRef( this );
}
testFun(){
console.log(123)
}
render(){
return (
<div>
<span>子组件</span>
</div>
)
}
}
|
更多编程相关知识,请访问:编程视频!!
以上就是浅析TypeScript和React中使用ref的方法的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
javascript数组排序方法是什么
用javascript实现斐波那契数列
createjs 小游戏开发的实例过程
javascript怎么判断数组是否存在指定元素
javascript专题之六:类型检测
javascript怎么对url进行编码转换
exports和module.expors之间有什么区别及联系?
讲解 js 内存管理机制及验证
javascript如何在object中删除属性
javascript可以跳出函数吗
更多相关阅读请进入《typescript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅析TypeScript和React中使用ref的方法