从 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 获得反应 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> 。

我在这篇博文中介绍了如何使用 React Hooks 创建 Twilio 视频应用程序，这也可能会有所帮助。