React 中如何從父元件呼叫子方法？

從父元件呼叫子方法

在 React 中，並非總是需要直接呼叫子方法。但是，在某些情況下可能有必要，例如當子元件公開命令式方法時。本文示範如何使用 refs 來實現這一點，無論是基於類別的元件還是功能元件。

基於類別的元件

要使用refs 從基於父類別的元件呼叫子方法，請依照下列步驟操作：

1. 使用下列指令在父元件中建立引用createRef():

const childRef = React.createRef();

2. 將ref分配給子組件：

<Child ref={childRef} />

3. 使用childRef 存取子組件的方法:

childRef.current.getAlert();

功能組件Hooks

隨著React Hooks 的引入，您現在也可以在功能元件中使用refs。以下是如何使用引用從父功能元件呼叫子方法：

1. 使用 useRef()掛鉤建立參考：

const childRef = useRef();

2. 將子元件包裹在forwardRef以存取ref:

const Child = forwardRef((props, ref) => {
  // ...
});

3. 使用 dleImperative鉤子將子級的方法公開給父級：

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. 使用childRef 存取孩子的方法：

childRef.current.getAlert();

注意： 要注意的是，在React 中通常不鼓勵使用ref 來呼叫子方法。更好的做法是透過 props 和 state 向下傳遞資料並向上傳遞事件。

以上是React 中如何從父元件呼叫子方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！