React父组件如何调用子组件

importReact,{Component}from'react';

classSubextendsComponent{
callback(){
console.log('执行回调');
}
render(){
return
子组件
;
}
}

classSuperextendsCompone免费云主机、域名nt{
constructor(props){
super(props);
this.sub=React.createRef();
}
handleOnClick(){
this.sub.callback();
}
render(){
return(



);
}
}

...

this.sub=ref}>

...

importReact,{Component}from'react';
import{observer}from'mobx-react'

@observer
classSubextendsComponent{
	componentDidMount(){
//将子组件指向父组件的变量
		this.props.onRef&&this.props.onRef(this);
	}
	callback(){
		console.log("执行我")
	}
	render(){
		return(
子组件
);
	}
}

classSuperextendsComponent{
	handleOnClick(){
//可以调用子组件方法
		this.Sub.callback();
	}
	render(){
		return(

			
click
			this.Sub=node}>	
		
)
	}
}

importReact,{useImperativeHandle}from'react';
import{observer}from'mobx-react'


constParent=()=>{
letChildRef=React.createRef();

functionhandleOnClick(){
ChildRef.current.func();
}

return(

click


);
};

constChild=observer(props=>{
//用useImperativeHandle暴露一些外部ref能访问的属性
useImperativeHandle(props.onRef,()=>{
//需要将暴露的接口返回出去
return{
func:func,
};
});
functionfunc(){
console.log('执行我');
}
return
子组件
;
});

exportdefaultParent;

importReact,{useRef,useImperativeHandle}from'react';
importReactDOMfrom'react-dom';
import{observer}from'mobx-react'

constFancyInput=React.forwardRef((props,ref)=>{
constinputRef=useRef();
useImperativeHandle(ref,()=>({
focus:()=>{
inputRef.current.focus();
}
}));

return
});

constSub=observer(FancyInput)

constApp=props=>{
constfancyInputRef=useRef();

return(


fancyInputRef.current.focus()}
>父组件调用子组件的focus

)
}

exportdefaultApp;