在父组件中,编写以下:函数
类中定义child,用于存放子组件的做用域this
public child: any;Copy to clipboardErrorCopied
绑定子组件做用域spa
public onRef(ref:any){ this.child = ref }Copy to clipboardErrorCopied
子组件上绑定refcode
<ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardErrorCopied
this.onRef = this.onRef.bind(this)Copy to clipboardErrorCopied
在子组件中,编写以下:ip
constructor中onRef绑定this作用域
this.props.onRef(this)Copy to clipboardErrorCopied
完成以上4步骤,父组件中能够随便调用子组件中state的值以及方法。get
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> ) } }