Блог

Главная - Вопросы по программированию - Как добавить html-тег video к div в React

Как добавить html-тег video к div в React

#javascript #html #reactjs #append

#javascript #HTML #reactjs #добавить

Вопрос:

 import React,{useRef} from "react"

const FuncComp = () => {
 
const videoItems = useRef();
  
const addVideo (stream){
    videoItems.current.append(<video src = {stream}> </video>);     
};

return (
    <div ref = {videoItems}>
      
    </div>
  )
}

Но функция addVideo не работает, поскольку я не могу добавить тег video к div. есть ли другой способ добиться этого?

Комментарии:

1. куда r вы вызываете addVideo?

2. Переименуйте VideoItems в videoItems.

3. @Asutosh это не весь код, но я уверен, что он прост и достаточно хорош, чтобы объяснить вопрос. и я вызываю его в функции peerjs, где пользователь отправляет и получает поток. и функция «addVideo» используется для добавления этих потоков на страницу

4. Синтаксис вашего кода неверен, вы используете функциональный компонент, но определили addVideo как функцию-член

Ответ №1:

вы можете написать свой код следующим образом:

 import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

const MyComponent = () => {
  const [videos, setVideos] = useState([]);

  const addVideo = (id, stream) => {
    const videosTemp = [...videos];
    videosTemp.push({ id, stream });

    setVideos(videosTemp);
  };

  const onAddVideoClick = () => {
    const id = uuidv4();
    const stream = "https://www.youtube.com/watch?v=haMOUb3KVSo";
    addVideo(id, stream);
  };

  return (
    <div>
      <button onClick={onAddVideoClick}>Add Video</button>
      {videos.map((video) => {
        <video key={video.id} src={video.src} />;
      })}
    </div>
  );
};

Комментарии:

1. Просто немного, любопытно, что это приведет к рендерингу всего видео путем добавления в очередь. Пожалуйста, используйте Rect.memo, чтобы предотвратить отображение существующих данных.