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

React父組件調(diào)用子組件中的方法實例詳解

 更新時間:2022年07月14日 09:53:46   作者:小天才程序員  
最近做一個React項目,所有組件都使用了函數(shù)式組件,遇到一個父組件調(diào)用子組件方法的問題,下面這篇文章主要給大家介紹了關(guān)于React父組件調(diào)用子組件中方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

文章中涉及 ref 的應(yīng)用僅為父組件調(diào)用子組件場景下的應(yīng)用方式,并未涵蓋 ref 的所有應(yīng)用方式!

Class組件

1. 自定義事件

 Parent.js

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {
  componentDidMount () {
    console.log(this.childRef)
  }
  handleChildEvent = (ref) => {
  	// 將子組件的實例存到 this.childRef 中, 這樣整個父組件就能拿到
    this.childRef = ref
  }
  //按鈕事件處理
  handleClick = () => {
  	// 通過子組件的實例調(diào)用組組件中的方法
    this.childRef.sendMessage()
  }
  render () {
    return (
      <>
        <Child
          onChildEvent={this.handleChildEvent}
        />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

export default Parent;

Child.js

import React, { Component } from 'react';

class Child extends Component {
	//子組件完成掛載時, 將子組件的方法 this 作為參數(shù)傳到父組件的函數(shù)中
  componentDidMount () {
  	// 在子組件中調(diào)用父組件的方法,并把當(dāng)前的實例傳進(jìn)去
    this.props.onChildEvent(this)
  }
  // 子組件的方法, 在父組件中觸發(fā)
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return ( <div>Child</div> );
  }
}

export default Child;

2. 使用 React.createRef()

ParentCmp.js

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 創(chuàng)建Ref
    this.childRef = React.createRef()
  }
  // 按鈕事件
  handleClick = () => {
  	// 直接通過 this.childRef.current 拿到子組件實例
    this.childRef.current.sendMessage()
  }
  render () {
    return (
      <>
        <ChildCmp ref={this.childRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

而子組件就是一個普通的組件

ChildCmp.js

import React, { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return 'Child';
  }
}

3. 使用回調(diào)Refs

回調(diào) Refs 是另一種設(shè)置 Ref 的方式,它能助你更精細(xì)地控制何時 refs 被設(shè)置和解除。

不同于傳遞 createRef() 創(chuàng)建的 ref 屬性,需要傳遞一個函數(shù)。

訪問 Ref 的時候也不需要 current。

ParentCmp.js

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 創(chuàng)建 Ref,不通過 React.createRef()
    this.childRef = null
  }
  // 設(shè)置 Ref
  setChildRef = (ref) => {
    this.childRef = ref
  }
  // 按鈕事件
  handleClick = () => {
    // 直接通過 this.childRef 拿到子組件實例
    this.childRef.sendMessage(`Trigger Child Event from Parent`)
  }

  render () {
    return (
      <>
        <ChildCmp ref={this.setChildRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

而子組件還是一個普通的組件

ChildCmp.js

import { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = (message) => {
    console.log('sending message:', message)
  }
  render () {
    return 'Child';
  }
}

【注】對比自定義事件方式,回調(diào) Refs 更像是精簡的自定義事件方式:

  • 自定義事件名稱變成了 ref
  • 子組件內(nèi)不需要手動綁定

Function組件

默認(rèn)情況下,不能在函數(shù)組件上使用 ref 屬性,因為它們沒有實例。所以上面的兩種方式是行不通的。

解決辦法就是使用 forwardRef 和 useImperativeHandle。

不過在函數(shù)的內(nèi)部是可以使用 useRef 鉤子來獲取組件內(nèi)的 DOM 元素。

Parent.js

import React, { useRef } from 'react';

import Child from './Child';

const Parent = () => {
  // 通過 Hooks 創(chuàng)建 Ref
  const childRef = useRef(null)
  const handleClick = () => {
    childRef.current.sendMessage()
  }
  return (
    <>
      <Child
        ref={childRef}
      />
      <button onClick={handleClick}>Trigger Child Event</button>
    </>
  );
}
export default Parent;

Child.js

import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  //將子組件的方法 暴露給父組件
  useImperativeHandle(ref, () => ({
    sendMessage
  }))
  const sendMessage = () => {
    console.log('sending message')
  }
  return ( <div>Child</div> );
})
export default Child;

注:

上面的例子中只是簡單地演示了父子組件之間的方法調(diào)用,當(dāng)然實際情況中子組件中可以也會有自己的 ref 指向自己內(nèi)部的 DOM 元素,不過這些原理都是一樣的。

補充:子組件調(diào)用父組件方法

子組件中調(diào)用父組件的setId方法

父組件

 <NavBarX
   item={item}
   current={current}
   getBatchDetails={(id) => this.getBatchDetails(0, id)}
   setId={(id, callback) => this.setState({ id }, callback)}
   onRef={this.onNavBarXRef}
 />

子組件

     this.props.setId(prePageId, () => {
        getBatchDetails(prePageId)
      })

總結(jié)

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

相關(guān)文章

  • React Native模塊之Permissions權(quán)限申請的實例相機

    React Native模塊之Permissions權(quán)限申請的實例相機

    這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請的實例相機的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-09-09
  • react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件

    react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件

    本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • React Native中Mobx的使用方法詳解

    React Native中Mobx的使用方法詳解

    這篇文章主要給大家介紹了關(guān)于React Native中Mobx的使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • React Electron生成桌面應(yīng)用過程

    React Electron生成桌面應(yīng)用過程

    這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-12-12
  • React中的Diff算法你了解嗎

    React中的Diff算法你了解嗎

    這篇文章主要為大家詳細(xì)介紹了React的Diff算法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例

    react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例

    本文主要介紹了react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • 關(guān)于useEffect執(zhí)行兩次的問題及解決

    關(guān)于useEffect執(zhí)行兩次的問題及解決

    這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • JavaScript中的useRef 和 useState介紹

    JavaScript中的useRef 和 useState介紹

    這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹,下列文章,我們將學(xué)習(xí) useRef 和 useState hook是什么,它們的區(qū)別以及何時使用哪個。 這篇文章中的代碼示例將僅涉及功能組件,但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下
    2021-11-11
  • React.js入門實例教程之創(chuàng)建hello world 的5種方式

    React.js入門實例教程之創(chuàng)建hello world 的5種方式

    React 是近期非常熱門的一個前端開發(fā)框架。應(yīng)用非常廣泛,接下來通過本文給大家介紹React.js入門實例教程之創(chuàng)建hello world 的5種方式 ,需要的朋友參考下吧
    2016-05-05
  • 使用Axios在React中請求數(shù)據(jù)的方法詳解

    使用Axios在React中請求數(shù)據(jù)的方法詳解

    這篇文章主要給大家介紹了初學(xué)React,如何規(guī)范的在react中請求數(shù)據(jù),主要介紹了使用axios進(jìn)行簡單的數(shù)據(jù)獲取,加入狀態(tài)變量,優(yōu)化交互體驗,自定義hook進(jìn)行數(shù)據(jù)獲取和使用useReducer改造請求,本文主要適合于剛接觸React的初學(xué)者以及不知道如何規(guī)范的在React中獲取數(shù)據(jù)的人
    2023-09-09

最新評論