React中父組件如何調用子組件的方法？useImperativeHandle就夠了

在React中要實現父組件對子組件的方法調用，離不開對React.forwardRef與useImperativeHandle的理解。 如果想直達使用方法，直接看第二點就可以了。如果想要理解透徹，請從開頭看起。

1、React.forwardRef： 實現ref屬性轉發

React.forwardRef會創建一個React組件，能將其自身的 ref 屬性轉發給其後代組件。

這種技術並不常見，但在以下兩種場景中特別有用：

• 轉發 refs 到 DOM 組件
• 在高階組件中轉發 refs

React.forwardRef 接受一個渲染函數（可理解為一個組件）作為參數。這個函數的參數是props和ref，返回 React 節點。

```c const FancyButton = React.forwardRef((props, ref) => ( {props.children} ));

// 以下這個 ref 直接指向 。 // You can now get a ref directly to the DOM button: const ref = React.createRef(); Click me!; `` 在上述的示例中，React 會將元素的ref` 作為第二個參數傳遞給 React.forwardRef 函數中的渲染函數。該渲染函數會將 ref 傳遞給 元素。 即：FancyButton中的ref傳給forwardRef中的ref參數，進而再傳給button的ref。

畫個圖幫助理解：

FancyButton的ref——>FancyButton定義時的 forwraRef((props,ref))——><button ref='ref'>

因此，當 React 附加了 ref 屬性之後，ref.current 將直接指向 <button>這個DOM 元素實例。

2、useImperativeHandle：將ref的實例傳遞給父組件。

上面講述了ref的傳遞，那麼我們這裏講一下如何將子組件的屬性、方法傳給父組件。 c useImperativeHandle(ref,createHandle,[deps]) useImperativeHandle 應當與 forwardRef 一起使用，自定義組件FancyInput，如下： 子組件：

```c

import React, { useRef, useState, useImperativeHandle } from 'react';

function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return ; } // 等同於 const FancyInput=React.forwardRef((props,ref){...}) FancyInput = forwardRef(FancyInput); ```

這樣寫之後，渲染 FancyInput 的父組件就可以直接調用 inputRef.current.focus()。 父組件： ```c const fanRef= React.useRef();

function handleClick(){ // 在這裏調用子組件的實例方法。 fanRef.current.focus(); }

Focus the input ```

本文主要參考React中文網，根據自己的理解加以總結。

如有幫助到您，請三連支持一下，歡迎留言。 如有不同意見，可在評論區指出，謝謝~