react父組件調用子組件的方式匯總

Posted on by

前言

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

父子組件都為class

父子組件都是class，父組件調用子組件方式比較傳統，方法如下：

// 父組件
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 回調可以引用它
        this.props.onRef(this)
    }
    myName = () => alert('my name is haorooms blogs')
    render() {
        return (<div>haorooms blog test</div>)
    }
}

父子組件都為hooks

一般我們會結合useRef，useImperativeHandle,forwardRef等hooks來使用，官方推薦useImperativeHandle,forwardRef配合使用，經過實踐發現forwardRef不用其實也是可以的，隻要子組件把暴露給父組件的方法都放到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}>觸發子組件方法</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

其實就是上面的結合體。子組件還是用useImperativeHandle ，可以結合forwardRef，也可以不用。

// 父組件class
class Parent extends Component{
  child= {} //主要加這個
  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

這裡其實和上面差不多，react主要dom省略，僅展示精華部分

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

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

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

小結

本文主要是總結，有些朋友在hooks或者class混合使用的時候，不清楚怎麼調用子組件方法，這裡總結一下，希望對各位小夥伴有所幫助。

到此這篇關於react父組件調用子組件的文章就介紹到這瞭,更多相關react父組件調用子組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：