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

React父組件調用子組件中的方法實例詳解

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

文章中涉及 ref 的應用僅為父組件調用子組件場景下的應用方式,并未涵蓋 ref 的所有應用方式!

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 = () => {
  	// 通過子組件的實例調用組組件中的方法
    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 作為參數傳到父組件的函數中
  componentDidMount () {
  	// 在子組件中調用父組件的方法,并把當前的實例傳進去
    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. 使用回調Refs

回調 Refs 是另一種設置 Ref 的方式,它能助你更精細地控制何時 refs 被設置和解除。

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

訪問 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
  }
  // 設置 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';
  }
}

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

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

Function組件

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

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

不過在函數的內部是可以使用 useRef 鉤子來獲取組件內的 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;

注:

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

補充:子組件調用父組件方法

子組件中調用父組件的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)
      })

總結

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

相關文章

  • React Native模塊之Permissions權限申請的實例相機

    React Native模塊之Permissions權限申請的實例相機

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

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

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

    React Native中Mobx的使用方法詳解

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

    React Electron生成桌面應用過程

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

    React中的Diff算法你了解嗎

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

    react.js實現頁面登錄跳轉示例

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

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

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

    JavaScript中的useRef 和 useState介紹

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

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

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

    使用Axios在React中請求數據的方法詳解

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

最新評論