Блог

Главная - Вопросы по программированию - Как я могу передать srcObject в videoElement с помощью ReactHook?

Как я могу передать srcObject в videoElement с помощью ReactHook?

#reactjs

#reactjs

Вопрос:

Я создаю динамический элемент видео в React с помощью hook createElement , но я не знаю, как я могу передать srcObject в этом элементе. Проверьте мой код ниже и направьте меня.

 const addVideoElement = (videoObject) => {
   const element = React.createElement("video", { srcObject: videoObject});
   ReactDOM.render(element, document.getElementById("video"));
};

Приветствуется любое решение!

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

1. Первый параметр React.createElement должен быть компонентом или строкой, если html-тег React.createElement(«div», { srcObject: VideoObject}, null) React.createElement(MyComponent, { srcObject: VideoObject}, null)

2. @AurelioLIMAFERREIRA видео — это элемент

Ответ №1:

 function App(){
   const addVideoElement = (srcObject)=> {
      ReactDOM.render(
        <SrcObjectVideo srcObject={srcObject} />,
        document.getElementById('video')
      )
   }
   ...
}
function SrcObjectVideo({ srcObject }){
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current.srcObject = srcObject;
  }, [srcObject]);
  return <video ref={ref} />
}

или используйте URL.createObjectURL https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

 
const addVideoElement = (srcObject)=> {
   ReactDOM.render(
     <video src={URL.createObjectURL(srcObject)} />, 
     document.getElementById('video')
   )
}

Ответ №2:

React.createElement принимает три параметра (компонент, реквизит, дочерние элементы) ДОКУМЕНТ

если компонент является тегом html, используйте строку типа: «div»

 const MyComponentVideo = (props) =>
 <video controls={props.controls} width={props.width}>
  <source src="props.src" type="props.type"/>
 </video>

const addVideoElement = (videoObject) => {
   const Element = React.createElement(MyComponentVideo, { ...someProps }, null);
   ReactDOM.render(Element, document.getElementById("video"), null);
};

или

 export default () => {
  const Source = React.createElement("source",{src:"https://urlSource"}, null);
  const Video = React.createElement("video", null, Source);
  return ReactDOM.render(Video, document.getElementById("video"));
};