關於useImperativeHandle

深色模式

關於useImperativeHandle

在 React 中，管理組件實例和它們的內部狀態有時可能相當複雜，特別是當你需要更多對組件的控制時。useImperativeHandle提供了一種方法，通過 ref 從子組件向父組件暴露特定的實例值或一組函數。

基本語法如下：

useImperativeHandle(ref, createHandle, [deps]);

ref: 這是從父組件傳遞的 ref。
createHandle: 函數返回你想要暴露的值或函數的對象。
deps: 依賴數組，如果有變化，會更新暴露的函數。

實際應用

1.暴露自定義方法

假設你有一個自定義輸入組件，希望父組件在點擊按鈕時能夠聚焦此輸入框。通常情況下，內部輸入元素的 DOM 對父組件是隱藏的。使用useImperativeHandle，你可以輕鬆創建並暴露自定義聚焦方法。

例如：

子組件:

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

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

父組件:

import React, { useRef } from 'react';
import FancyInput from './FancyInput';

function App() {
  const inputRef = useRef();

  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus the input
      </button>
    </>
  );
}

在這個例子中，FancyInput 組件使用useImperativeHandle 向任何使用 ref 與FancyInput 互動的父組件暴露focus 方法。

2.管理媒體播放

對於一個媒體播放器組件，你可以暴露如播放（play）、暫停（pause）或重置（reset）等方法。

子組件:

const MediaPlayer = forwardRef((props, ref) => {
  const audioRef = useRef();
  useImperativeHandle(ref, () => ({
    play: () => {
      audioRef.current.play();
    },
    pause: () => {
      audioRef.current.pause();
    },
    reset: () => {
      audioRef.current.currentTime = 0;
    }
  }));

  return <audio ref={audioRef} src={props.src} controls />;
});

父組件:

import React, { useRef } from 'react';
import MediaPlayer from './MediaPlayer';

function App() {
  const mediaRef = useRef();

  return (
    <>
      <MediaPlayer ref={mediaRef} src="example.mp3" />
      <button onClick={() => mediaRef.current.play()}>
        Play
      </button>
      <button onClick={() => mediaRef.current.pause()}>
        Pause
      </button>
      <button onClick={() => mediaRef.current.reset()}>
        Reset
      </button>
    </>
  );
}

在此例中，MediaPlayer 組件使用useImperativeHandle 向任何使用 ref 與MediaPlayer 互動的父組件暴露控制媒體播放的方法。父組件提供了播放、暫停和重置的按鈕。