快捷導(dǎo)航

react父組件調(diào)用子組件的方式匯總

更新時(shí)間：2022年08月22日 10:49:52 作者：Haorooms

在react中常用props實(shí)現(xiàn)子組件數(shù)據(jù)到父組件的傳遞,但是父組件調(diào)用子組件的功能卻不常用,下面這篇文章主要給大家介紹了關(guān)于react父組件調(diào)用子組件的相關(guān)資料,需要的朋友可以參考下

前言

本文是小結(jié)類文章，主要總結(jié)一下工作中遇到的父組件調(diào)用子組件方法。當(dāng)然除了用ref之外還有很多其他方式，本文僅僅列舉ref的方式。分別介紹父子組件都為class；父子組件都是hooks；父組件是class子組件是hooks；父組件是hooks，子組件是class的各種情況的調(diào)用方式。

父子組件都為class

父子組件都是class，父組件調(diào)用子組件方式比較傳統(tǒng)，方法如下：

// 父組件
import React, {Component} from 'react';
export default class Parent extends Component {
    render() {
        return(
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }
    onRef = (ref) => {
        this.child = ref
    }
    click = (e) => {
        this.child.myName()
    }
}

//子組件
class Child extends Component {    
   componentDidMount(){        //必須在這里聲明，所以 ref 回調(diào)可以引用它
        this.props.onRef(this)
    }
    myName = () => alert('my name is haorooms blogs')
    render() {
        return (<div>haorooms blog test</div>)
    }
}

父子組件都為hooks

一般我們會(huì)結(jié)合useRef，useImperativeHandle,forwardRef等hooks來(lái)使用，官方推薦useImperativeHandle,forwardRef配合使用，經(jīng)過(guò)實(shí)踐發(fā)現(xiàn)forwardRef不用其實(shí)也是可以的，只要子組件把暴露給父組件的方法都放到useImperativeHandle里面就可以了。

/* FComp 父組件 */
import {useRef} from 'react';
import ChildComp   from './child'
const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子組件暴露給父組件的方法
        childRef.current.changeVal(99);
    }
    return (
        <>
            <ChildComp ref={childRef} />
            <button onClick={updateChildState}>觸發(fā)子組件方法</button>
        </>
    )
}

import React, { useImperativeHandle, forwardRef } from "react"
let Child = (props, ref) => {
 const [val, setVal] = useState();
  useImperativeHandle(ref, () => ({ // 暴露給父組件的方法
     getInfo,
      changeVal: (newVal) => {
          setVal(newVal);
        },
      refreshInfo: () => {
        console.log("子組件refreshInfo方法")
    }
  }))

  const getInfo = () => {
    console.log("子組件getInfo方法")
  }

  return (
    <div>子組件</div>
  )
}
Child = forwardRef(Child)
export default Child

父組件為class,子組件為hooks

其實(shí)就是上面的結(jié)合體。子組件還是用useImperativeHandle ，可以結(jié)合forwardRef，也可以不用。

// 父組件class
class Parent extends Component{
  child= {} //主要加這個(gè)
  handlePage = (num) => {
    // this.child.
    console.log(this.child.onChild())
  }
   onRef = ref => {
    this.child = ref
  }
render() {
   return {
     <ListForm onRef={this.onRef} />
   }
 }
}

// 子組件hooks
import React, { useImperativeHandle } from 'react'
const ListForm = props => {
  const [form] = Form.useForm()

  //重置方法
  const onReset = () => {
    form.resetFields()
  }
}

 useImperativeHandle(props.onRef, () => ({
    // onChild 就是暴露給父組件的方法
    onChild: () => {
      return form.getFieldsValue()
    }
  }))
  ..............

父組件為hooks，子組件是class

這里其實(shí)和上面差不多，react主要dom省略，僅展示精華部分

//父組件hooks
 let richTextRef = {};
// richTextRef.reseditorState();調(diào)用子組件方法
  <RichText 
      getRichText={getRichText} 
      content={content} 
      onRef={ref => richTextRef = ref} 
  />

//子組件class
  componentDidMount = () => {
    this.props.onRef && this.props.onRef(this);// 關(guān)鍵部分
  }

   reseditorState = (content) => {
    this.setState({
      editorState: content ||'-',
    })
  }