使用 React 渲染 HTMLAudioElement DOM 元素

Question

我在我的项目中使用 Twillio JS API 来显示来自多个来源的视频输出。此 API 生成可附加到页面的 DOM 视频/音频元素的枚举，如下所示：

let tracks = TwillioVideo.createLocalTracks({

  video: { deviceId: this.state.selectedVideoInput.deviceId },

  audio: { deviceId: this.state.selectedAudioInput.deviceId }

}

//Find dom element to attach tracks to

let previewContainer = document.getElementById('local-media')

//Attach all tracks

this.setState({localTracks: tracks})

tracks.forEach(track => previewContainer.appendChild(track.attach()))

track.attach() 生成一个可以附加的 dom 元素，但它不是我可以放入 React 状态的东西，所以它可以像这样呈现：

<div id="local-media">{this.state.localTracks.map(track => track.attach()}</div>

如果我实际上尝试这样做，我会得到：

Unhandled Rejection (Invariant Violation)：对象作为 React 子对象无效（找到：[object HTMLAudioElement]）。如果您打算渲染一组子项，请改用数组。

编辑 1： 我能够通过这样做来摆脱错误：

{this.state.localTracks.map(track => track.attach().Element)}

但它没有返回渲染HTML，但undefined代替