Question

我有一个实用程序，可以为视频生成缩略图并将其作为HTMLCanvasElement返回。我想在React中渲染该元素，如下所示：

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

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

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

这样做的好方法是什么？一个想法是从componentDidMount进行直接DOM操作（例如React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)），但这看起来很像黑客。

Answer 1

我遇到了同样的问题，您可以通过两种方式解决：

简单方法：

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

另一种我喜欢的方式（但是是个人的）：

onComponentDidMount() {
  const element = document.getElementById('uniquePlaceHolderKey');
  element.parentNode.replaceChild(this.props.videoThumbnailCanvas, element);
}

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

第二个解决方案允许您加载一个临时元素，您将使用自己绘制的画布实例进行交换。我没有找到适当的反应解决方案来强制附加预渲染的画布元素。有适当的反应方法来获取组件的元素（如this.findDomNode()），因为在组件实例上工作，它们优于getElementById。

如何在React中渲染`HTMLCanvasElement`？

1 个答案: