react父组件调用子组件的方式汇总.docxVIP

第

react父组件调用子组件的方式汇总

目录前言父子组件都为class父子组件都为hooks父组件为class,子组件为hooks父组件为hooks，子组件是class小结

前言

本文是小结类文章，主要总结一下工作中遇到的父组件调用子组件方法。当然除了用ref之外还有很多其他方式，本文仅仅列举ref的方式。分别介绍父子组件都为class；父子组件都是hooks；父组件是class子组件是hooks；父组件是hooks，子组件是class的各种情况的调用方式。

父子组件都为class

父子组件都是class，父组件调用子组件方式比较传统，方法如下：

//父组件

importReact,{Component}fromreact;

exportdefaultclassParentextendsComponent{

render(){

return(

div

ChildonRef={this.onRef}/

buttonthis.click}click/button

/div

onRef=(ref)={

this.child=ref

click=(e)={

this.child.myName()

//子组件

classChildextendsComponent{

componentDidMount(){//必须在这里声明，所以ref回调可以引用它

this.props.onRef(this)

myName=()=alert(mynameishaoroomsblogs)

render(){

return(divhaoroomsblogtest/div)

}

父子组件都为hooks

一般我们会结合useRef，useImperativeHandle,forwardRef等hooks来使用，官方推荐useImperativeHandle,forwardRef配合使用，经过实践发现forwardRef不用其实也是可以的，只要子组件把暴露给父组件的方法都放到useImperativeHandle里面就可以了。

/*FComp父组件*/

import{useRef}fromreact;

importChildCompfrom./child

constFComp=()={

constchildRef=useRef();

constupdateChildState=()={

//changeVal就是子组件暴露给父组件的方法

childRef.current.changeVal(99);

return(

ChildCompref={childRef}/

buttonupdateChildState}触发子组件方法/button

importReact,{useImperativeHandle,forwardRef}fromreact

letChild=(props,ref)={

const[val,setVal]=useState();

useImperativeHandle(ref,()=({//暴露给父组件的方法

getInfo,

changeVal:(newVal)={

setVal(newVal);

refreshInfo:()={

console.log(子组件refreshInfo方法)

constgetInfo=()={

console.log(子组件getInfo方法)

return(

div子组件/div

Child=forwardRef(Child)

exportdefaultChild

父组件为class,子组件为hooks

其实就是上面的结合体。子组件还是用useImperativeHandle，可以结合forwardRef，也可以不用。

//父组件class

classParentextendsComponent{

child={}//主要加这个

handlePage=(num)={

//this.child.

console.log(this.child.onChild())

onRef=ref={

this.child=ref

render(