javascript: cree una referencia al componente de clase externo dentro del componente funcional en React

CorePress2023-11-30  1

Me gustaría usar la biblioteca del reproductor React en mi aplicación

import React, { useEffect, useRef } from "react";
import ReactPlayer from "react-player";
import { useSelector } from "../../../redux/useSelector";

const VIDEO_URL =
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";

export const Player: React.FC = React.memo(() => {
  const player = React.useRef<any>(null);

  const targetTimestamp = useSelector((state) => {
    const {
      timestamps: { selectedTimestamp },
    } = state;
    return (selectedTimestamp && selectedTimestamp.timestamp) || 0;
  });

  useEffect(() => {
    console.log(player.current);
    player.current && player.current.seekTo(targetTimestamp );
  }, [targetTimestamp]);

  return (
    <ReactPlayer
      ref={player}
      url={VIDEO_URL}
      controls
      width={1280}
      height={720}
    />
  );
});

console.log(jugador.actual); funciona, pero en la siguiente línea aparece el error

Error de tipo no detectado: no se puede leer la propiedad 'seekTo' de indefinido

¿Qué pasa? ¿No puedo usar useRef aquí? ¿Debo crear un componente de clase Player? ¿Cómo solucionarlo y hacerlo funcionar?

  • 1 aquí un ejemplo igual al tuyo y parece que todo funciona bien. codesandbox.io/s/amazing-ellis-jrjxq?file=/src/App.js -adel 7 de junio de 2020 a las 19:08


------------------------

    //// 
    let player;
      const ref = (playerRef) => {
        player = playerRef;
      }
    
    ////
     const seekHandler = (event) => {
   ....
    player.seekTo(parseFloat(event.target.value), "fraction");
...
  };
    
    ...
     <ReactPlayer
              ref={ref}
    .....
Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare