使用 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 tolet previewContainer = document.getElementById('local-media')//Attach all tracksthis.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代替