父组件

在父组件中，编写如下：

  1. 类中定义child,用于寄存子组件的作用域

    public child: any;Copy to clipboardErrorCopied

  2. 绑定子组件作用域

    public onRef(ref:any){ this.child = ref}Copy to clipboardErrorCopied

  3. 子组件上绑定ref

    <ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied
  4. onRef 绑定this(第3步，不应用箭头函数的状况)
this.onRef = this.onRef.bind(this)Copy to clipboardErrorCopied

子组件

在子组件中，编写如下：

  1. constructor中onRef绑定this

    this.props.onRef(this)Copy to clipboardErrorCopied

实现以上4步骤，父组件中能够轻易调用子组件中state的值以及办法。

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>        )    }}