React父組件如何調(diào)用子組件的方法推薦
調(diào)用方法：1、類組件中的調(diào)用可以利用React.createRef()、ref的函數(shù)式聲明或props自定義onRef屬性來實現(xiàn)；2、函數(shù)組件、Hook組件中的調(diào)用可以利用useImperativeHandle或forwardRef拋出子組件ref來實現(xiàn)。
本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。
在React中，我們經(jīng)常在子組件中調(diào)用父組件的方法，一般用props回調(diào)即可。但是有時候也需要在父組件中調(diào)用子組件的方法，通過這種方法實現(xiàn)高內(nèi)聚。有多種方法，請按需服用。
類組件中
1、React.createRef()
- 優(yōu)點：通俗易懂，用ref指向。
- 缺點：使用了HOC的子組件不可用，無法指向真是子組件
比如一些常用的寫法，mobx的@observer包裹的子組件就不適用此方法。
import React, { Component } from 'react';
class Sub extends Component {
callback() {
console.log('執(zhí)行回調(diào)');
}
render() {
return <div>子組件</div>;
}
}
class Super extends Component {
constructor(props) {
super(props);
this.sub = React.createRef();
}
handleOnClick() {
this.sub.callback();
}
render() {
return (
<div>
<Sub ref={this.sub}></Sub>
</div>
);
}
}2、ref的函數(shù)式聲明
- 優(yōu)點：ref寫法簡潔
- 缺點：使用了HOC的子組件不可用，無法指向真是子組件（同上）
使用方法和上述的一樣，就是定義ref的方式不同。
...
<Sub ref={ref => this.sub = ref}></Sub>
...3、使用props自定義onRef屬性
- 優(yōu)點：假如子組件是嵌套了HOC，也可以指向真實子組件。
- 缺點：需要自定義props屬性
import React, { Component } from 'react';
import { observer } from 'mobx-react'
@observer
class Sub extends Component {
componentDidMount(){
// 將子組件指向父組件的變量
this.props.onRef && this.props.onRef(this);
}
callback(){
console.log("執(zhí)行我")
}
render(){
return (<div>子組件</div>);
}
}
class Super extends Component {
handleOnClick(){
// 可以調(diào)用子組件方法
this.Sub.callback();
}
render(){
return (
<div>
<div onClick={this.handleOnClick}>click</div>
<Sub onRef={ node => this.Sub = node }></Sub>
</div>)
}
}函數(shù)組件、Hook組件
1、useImperativeHandle
- 優(yōu)點： 1、寫法簡單易懂 2、假如子組件嵌套了HOC，也可以指向真實子組件
- 缺點： 1、需要自定義props屬性 2、需要自定義暴露的方法
import React, { useImperativeHandle } from 'react';
import { observer } from 'mobx-react'
const Parent = () => {
let ChildRef = React.createRef();
function handleOnClick() {
ChildRef.current.func();
}
return (
<div>
<button onClick={handleOnClick}>click</button>
<Child onRef={ChildRef} />
</div>
);
};
const Child = observer(props => {
//用useImperativeHandle暴露一些外部ref能訪問的屬性
useImperativeHandle(props.onRef, () => {
// 需要將暴露的接口返回出去
return {
func: func,
};
});
function func() {
console.log('執(zhí)行我');
}
return <div>子組件</div>;
});
export default Parent;2、forwardRef
使用forwardRef拋出子組件的ref
這個方法其實更適合自定義HOC。但問題是，withRouter、connect、Form.create等方法并不能拋出ref，假如Child本身就需要嵌套這些方法，那基本就不能混著用了。forwardRef本身也是用來拋出子元素，如input等原生元素的ref的，并不適合做組件ref拋出，因為組件的使用場景太復(fù)雜了。
import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react'
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" />
});
const Sub = observer(FancyInput)
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button
onClick={() => fancyInputRef.current.focus()}
>父組件調(diào)用子組件的 focus</button>
</div>
)
}
export default App;總結(jié)
父組件調(diào)子組件函數(shù)有兩種情況
- 子組件無HOC嵌套：推薦使用ref直接調(diào)用
- 有HOC嵌套：推薦使用自定義props的方式
到此這篇關(guān)于React父組件怎么調(diào)用子組件的方法的文章就介紹到這了,更多相關(guān)React父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了ahooks控制時機的hook實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React實現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖
這篇文章主要介紹了React實現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React Antd Upload組件上傳多個文件實現(xiàn)方式
為實現(xiàn)多文件上傳,需使用beforeUpload和customRequest替代onChange以避免多次調(diào)用問題,并處理文件路徑以兼容Electron不同平臺2025-08-08
從源碼到架構(gòu):React?useActionState?深度解析
React 19引入的 useActionState是近年來React Hooks 體系中設(shè)計最精巧的API 之一,本文給大家介紹從源碼到架構(gòu)：React?useActionState?深度剖析,感興趣的朋友跟隨小編一起看看吧2026-05-05
這篇文章主要介紹了react項目優(yōu)化配置,主要包括優(yōu)化配置CDN，優(yōu)化路由懶加載，結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要介紹了React使用hook如何實現(xiàn)數(shù)據(jù)雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03![Vite+React+TypeScript手?jǐn)]TodoList的項目實踐](http://img.jbzj.com/images/xgimg/bcimg6.png)
Vite+React+TypeScript手?jǐn)]TodoList的項目實踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2023-03-03
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React創(chuàng)建虛擬DOM的兩種方式小結(jié)
本文主要介紹了兩種創(chuàng)建React虛擬DOM的方式,包括JS方式和jsx方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01