Javascript 如何在React中呈现“htmlcanvaseElement”？

我有一个实用程序，可以生成视频的缩略图，并将其作为

htmlcanvaseElement

返回。我想在React中呈现该元素，如下所示：

render () {
   return (
      <div className='video-thumbnail'>
         {this.props.videoThumbnailCanvas}
      </div>
   );
}

render（）{
返回(
{this.props.videoThumbnailCanvas}
);
}

但当我尝试时，我得到一个错误：

错误：对象作为React子对象无效（找到：[object HtmlCanvaseElement]）

---

做这件事的好方法是什么？一个想法是从

componentDidMount

（例如

React.getDOMNode（this.appendChild）（this.props.videoThumbnailCanvas）

）直接进行DOM操作，但这似乎有点像黑客行为。

我也遇到了同样的问题，您可以用两种方法解决：

简单的方法：

render () {
   const src = this.props.videoThumbnailCanvas.toDataURL();
   return (
      <div className='video-thumbnail'>
         <img src={src} />
      </div>
   );
}

render（）{
const src=this.props.videoThumbnailCanvas.toDataURL（）；
返回(
);
}

另一方面，我更喜欢（但是个人的）：

onComponentDidMount（）{
常量元素=document.getElementById（'uniquePlaceHolderKey'）；
element.parentNode.replaceChild（this.props.videoThumbnailCanvas，element）；
}
渲染（）{
返回(
);
}

第二个解决方案允许您加载一个temp元素，并将其与您自己的绘制画布实例交换。我没有找到合适的react解决方案来强制附加预渲染画布元素。

---

有适当的react方法来获取组件的元素（如

this.findDomNode（）

），这些方法比getElementById更可取，因为它们在组件实例上工作。

您控制实用程序函数吗？你能让它返回一个

JSX元素吗？@DannyDelott——我控制它。它当前看起来是这样的：“函数getThumb（）{let canvas:htmlcanvaseElement=document.createElement（'canvas'）；let context=canvas.getContext（'2d'）；if（context）{context.drawImage（videoElement，0，0，w，h）；}return canvas；}“我不确定如何使用JSX元素绘制

上下文。我相信您不能在
getThumb（）中使用
document.creteElement
。
@Muhaimin:为什么不能？它确实有效。这是错误的做法，所以我曾想过使用toDataURL，但不幸的是，只有当捕获画布的视频来自同一个域或允许访问的跨域时，它才有效。这在我的情况下是不能保证的。如果情况并非如此，toDataURL（）将失败，并出现一个错误，即无法导出“受污染”（使用来自另一个域的数据写入）画布。您的第二个建议确实需要直接插入DOM，我也可以使用实际的画布（不使用toDataURL（））来插入DOM。这是目前最合理的方式，但对于React来说似乎是非常反模式的。这是一种反模式。你正在插入你不知道的东西。同样正确的是，react不会给你一个选择。dataurl的性能更高，您可以使用react组件lifecycleoh使其保持活动状态是的，第二个示例中的dataurl是复制粘贴错误
onComponentDidMount() {
  const element = document.getElementById('uniquePlaceHolderKey');
  element.parentNode.replaceChild(this.props.videoThumbnailCanvas, element);
}

render () {
   return (
      <div className='video-thumbnail'>
         <div id="uniquePlaceHolderKey" ></div>
      </div>
   );
}