React父組件調(diào)用子組件中的方法實例詳解
更新時間：2022年07月14日 09:53:46 作者：小天才程序員
最近做一個React項目,所有組件都使用了函數(shù)式組件,遇到一個父組件調(diào)用子組件方法的問題,下面這篇文章主要給大家介紹了關(guān)于React父組件調(diào)用子組件中方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
文章中涉及 ref 的應用僅為父組件調(diào)用子組件場景下的應用方式，并未涵蓋 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 = () => {
// 通過子組件的實例調(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)用父組件的方法,并把當前的實例傳進去
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 是另一種設置 Ref 的方式，它能助你更精細地控制何時 refs 被設置和解除。
不同于傳遞 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
}
// 設置 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組件
默認情況下，不能在函數(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)用，當然實際情況中子組件中可以也會有自己的 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 是目前流行的跨平臺移動應用開發(fā)框架之一。本文介紹react native環(huán)境安裝流程及遇到問題解決方法，感興趣的朋友一起看看吧2021-05-05
這篇文章主要給大家介紹了使用React和Ant Design庫構(gòu)建的待辦任務列表應用,它包含了可編輯的表格,用戶可以添加、編輯和完成任務,以及保存任務列表數(shù)據(jù)到本地存儲,文中有相關(guān)的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了React.js前端導出Excel的方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本篇文章主要介紹了React-Native 組件之 Modal的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
組件的生命周期就是React的工作過程，就好比人有生老病死，自然界有日月更替，每個組件在網(wǎng)頁中也會有被創(chuàng)建、更新和刪除，如同有生命的機體一樣2022-12-12
React Native實現(xiàn)簡單的登錄功能(推薦)
這篇文章主要介紹了React Native實現(xiàn)登錄功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
React videojs 實現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫,用來對接m3u8視頻類型,這里總結(jié)一下自定義組件遇到的問題及實現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08
React-router 4 按需加載的實現(xiàn)方式及原理詳解
本篇文章主要介紹了React-router 4 按需加載的實現(xiàn)方式及原理詳解，非常具有實用價值，需要的朋友可以參考下2017-05-05
在現(xiàn)代前端開發(fā)中,使用?UI?庫可以顯著提高開發(fā)效率,Tailwind?CSS?是一個功能類優(yōu)先的?CSS?框架,本文將詳細介紹如何在?React?項目中引入和使用?Tailwind?CSS,包括各種配置選項和最佳實踐,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問題及解決方案，結(jié)合示例代碼圖文給大家介紹的非常詳細，需要的朋友參考下吧2022-05-05