Reactに `HTMLCanvasElement`をレンダリングするには？

Question

私は、ビデオのサムネイルを作成し、それをHTMLCanvasElementとして返すユーティリティを持っています。

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

をしかし、私は、私はエラーを取得し、ことをしようとすることを：私はそうのように、リアクトでその要素をレンダリングしたい

Error: Objects are not valid as a React child (found: [object HTMLCanvasElement]).

これを行うには良い方法は何ですか？ 1つのアイデアはcomponentDidMount（例えばReact.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)）から直接的なDOM操作を行うことですが、それはむしろハックのようです。

Answer 1

私は同じ問題を持って、あなたは、2通りの方法で解決することができます：

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> 
    ); 
} 

この2番目の解決策では、独自のペイントされたキャンバスインスタンスと入れ替える一時要素を読み込むことができます。私は、事前にレンダリングされたキャンバス要素の追加を強制する適切な反応の解決策を見出しませんでした。 コンポーネントインスタンスで作業してからgetElementByIdよりも望ましいコンポーネントの要素（this.findDomNode()など）を取得する適切な反応メソッドがあります。