如何在 React 中呈现 `HTMLCanvasElement`？

Question

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

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

但是当我尝试这样做时，我收到一个错误：

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

有什么好方法可以做到这一点？一种想法是从componentDidMount(eg React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas))直接进行 DOM 操作，但这似乎有点像 hack。

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 更可取。