从 React.createElement() 获取 DOM 元素

Question

Is there a way to get basic DOM Element from React.createElement?

Like I'm trying to create a list of React audio elements for each participant in the conversation and I need to attach a track to an element, but it's not working with react elements...

My idea is something like this, but this is not working

const ref = useRef<HTMLAudioElement>()
const addAudioTrack = (track: AudioTrack) => {
    const audio = React.createElement("audio", {key: track.name, ref: ref})
    console.log(ref.current)
    track.attach(ref.current)
    setAudioTracks((prevTracks: any) => [...prevTracks, audio])
}

EDIT : reproducible example can't be totally provided because for "track" you need Twilio but here is something that you can try... I just want to know if there is a possibility to get react DOM element from ReactElement or I need to use another approach

import React, {useRef, useState} from "react";

const NewTest = () => {

    const [audioTracks, setAudioTracks] = useState<any>([])

    const ref = useRef<HTMLAudioElement>()
    const addAudioTrack = (track: any) => {
        const audio = React.createElement("audio", {key: track.name, ref: ref})
        console.log(ref.current)
        if(ref.current) console.log("it is working")
        // track.attach(ref.current)
        setAudioTracks((prevTracks: any) => [...prevTracks, audio])
    }

    return (
        <div>
            <button onClick={() => {
                addAudioTrack({name: `audioTrack-${(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}`})
            }}>
                AddTrack
            </button>
            {audioTracks && audioTracks.map((audio: any) => {
                return <div key={audio.key} style={{width: 50, height: 50, backgroundColor: "red"}}>{audio} {audio.key}</div>
            })}
        </div>
    )
}

export default NewTest

Answer 1

Twilio developer evangelist here.

I think you might be thinking of this the wrong way. You do need a ref to use track.attach , but you can still handle the creation of elements via JSX.

I'd create an <AudioTrack> element that you can render with each audio track that uses useRef and useEffect to get an <audio> element and use track.attach . Something like this:

import React, { useEffect, useRef } from "react";

const AudioTrack = ({ audioTrack }) => {
  const ref = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    audioTrack.attach(ref.current);
    return () => {
      audioTrack.detach();
    }
  }, [audioTrack])
  
  return <div><audio ref={ref}></div>;
}

export AudioTrack;

Then, in the parent container, you can render an <AudioTrack> for each of the audioTracks in your state.

I walk through how I created a Twilio Video app using React Hooks in this blog post , that might be helpful too.