从 React.createElement() 获取 DOM 元素

Question

有没有办法从 React.createElement 获取基本的 DOM 元素？

就像我正在尝试为对话中的每个参与者创建一个 React 音频元素列表，我需要将轨道附加到一个元素，但它不适用于反应元素...

我的想法是这样的，但这行不通

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])
}

编辑：无法完全提供可重现的示例，因为对于“跟踪”，您需要 Twilio，但您可以尝试以下方法...我只是想知道是否有可能从 ReactElement 获取 react DOM 元素，否则我需要使用另一种方法

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 开发者宣传员。

我想你可能想错了。您确实需要 ref 才能使用 track.attach，但您仍然可以通过 JSX 处理元素的创建。

我将创建一个 <AudioTrack> 元素，您可以使用每个音轨渲染它，使用 useRef 和 useEffect 来获取 <audio> 元素并使用 track.attach。像这样的：

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;

然后，在父容器中，您可以为您所在州的每个audioTracks 渲染一个<AudioTrack>。

我将介绍如何创建Twilio Video app using React Hooks in this blog post，这也可能会有所帮助。