javascript / intermediate
Snippet
Imperative API mit useImperativeHandle bereitstellen
Bei der Verwendung von 'forwardRef' möchte man oft benutzerdefinierte Methoden statt des rohen DOM-Knotens an das Elternteil weitergeben. 'useImperativeHandle' lässt Sie genau definieren, welche Eigenschaften und Funktionen die Elternkomponente über die Ref aufrufen kann.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useImperativeHandle, forwardRef, useRef } from 'react';const VideoPlayer = forwardRef((props, ref) => {const videoRef = useRef();useImperativeHandle(ref, () => ({play: () => videoRef.current.play(),stop: () => {videoRef.current.pause();videoRef.current.currentTime = 0;}}));return <video ref={videoRef} src={props.src} />;});
react
Erklärung
1
useImperativeHandle(ref, () => ({ ... }))
Definiert das Objekt, das der 'current'-Eigenschaft der Ref des Elternteils zugewiesen wird.
2
play: () => videoRef.current.play()
Stellt eine spezifische 'play'-Funktion bereit, während das interne Video-Element gekapselt bleibt.