父组件
在父组件中,编写如下:
类中定义child,用于存放子组件的作用域
public child: any;Copy to clipboardErrorCopied
绑定子组件作用域
public onRef(ref:any){this.child = ref}Copy to clipboardErrorCopied
子组件上绑定ref
<ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied
onRef 绑定this(第3步,不使用箭头函数的情况)
this.onRef = this.onRef.bind(this)Copy to clipboardErrorCopied
子组件
在子组件中,编写如下:
constructor中onRef绑定this
this.props.onRef(this)Copy to clipboardErrorCopied
完成以上4步骤,父组件中可以随便调用子组件中state的值以及方法。
export class ParentCom extends ponent<{}, {}> {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 ponent<childProps, {}> {constructor(props:{}){super(props);this.props.onRef(this);}testFun(){console.log(123)}render(){return (<div><span>子组件</span></div>)}}