欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年08月22日 10:49:52   作者:Haorooms  
在react中常用props實現(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

一般我們會結(jié)合useRef,useImperativeHandle,forwardRef等hooks來使用,官方推薦useImperativeHandle,forwardRef配合使用,經(jīng)過實踐發(fā)現(xiàn)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}>觸發(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

其實就是上面的結(jié)合體。子組件還是用useImperativeHandle ,可以結(jié)合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();調(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 ||'-',
    })
  }

小結(jié)

本文主要是總結(jié),有些朋友在hooks或者class混合使用的時候,不清楚怎么調(diào)用子組件方法,這里總結(jié)一下,希望對各位小伙伴有所幫助。

到此這篇關(guān)于react父組件調(diào)用子組件的文章就介紹到這了,更多相關(guān)react父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React Native基礎(chǔ)入門之初步使用Flexbox布局

    React Native基礎(chǔ)入門之初步使用Flexbox布局

    React中引入了flexbox概念,flexbox是屬于web前端領(lǐng)域CSS的一種布局方案,下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2018-07-07
  • react常見的ts類型實踐解析

    react常見的ts類型實踐解析

    這篇文章主要為大家介紹了react常見的ts類型實踐解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • react-router-dom6(對比?router5)快速入門指南

    react-router-dom6(對比?router5)快速入門指南

    這篇文章主要介紹了快速上手react-router-dom6(對比?router5),通過本文學(xué)習(xí)最新的react-router-dom?v6版本的路由知識,并且會與v5老版本進行一些對比,需要的朋友可以參考下
    2022-08-08
  • React如何立即更新DOM

    React如何立即更新DOM

    這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • react中braft-editor的基本使用方式

    react中braft-editor的基本使用方式

    這篇文章主要介紹了react中braft-editor的基本使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React類組件中super()和super(props)的區(qū)別詳解

    React類組件中super()和super(props)的區(qū)別詳解

    這篇文章給大家詳細介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-01-01
  • react 下拉框內(nèi)容回顯的實現(xiàn)思路

    react 下拉框內(nèi)容回顯的實現(xiàn)思路

    這篇文章主要介紹了react 下拉框內(nèi)容回顯,實現(xiàn)思路是通過將下拉框選項的value和label一起存儲到state中, 初始化表單數(shù)據(jù)時將faqType對應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下
    2024-05-05
  • React自定義hooks同步獲取useState的最新狀態(tài)值方式

    React自定義hooks同步獲取useState的最新狀態(tài)值方式

    這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React深入分析useEffect源碼

    React深入分析useEffect源碼

    useEffect是react?v16.8新引入的特性。我們可以把useEffect?hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合
    2022-11-11
  • react中使用ant組件庫的modal彈窗報錯問題及解決

    react中使用ant組件庫的modal彈窗報錯問題及解決

    這篇文章主要介紹了react中使用ant組件庫的modal彈窗報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03

最新評論