Wie rende ich ein `HTMLcanvasElement` in React?

Question

Ich habe ein Dienstprogramm, das ein Thumbnail für ein Video erzeugt und es als zurückgibt. Ich möchte dieses Element machen in Reaktion, etwa so:

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

Aber wenn ich versuche, dass ich einen Fehler, dass:

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

Was ist ein guter Weg, dies zu tun? Eine Idee besteht darin, eine direkte DOM-Manipulation von componentDidMount (z. B. React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)) durchzuführen, aber das scheint ziemlich hackig zu sein.

Answer 1

bekam ich das gleiche Problem und Sie können auf 2 Arten lösen:

der einfache Weg:

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

andersrum ich mehr mag (aber ist persönlich):

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

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

Mit dieser zweiten Lösung können Sie ein temporäres Element laden, das Sie mit Ihrer eigenen bemalten Leinwandinstanz austauschen. Ich habe keine passende Lösung gefunden, um das Anfügen eines vorgerenderten Canvas-Elements zu erzwingen. Es gibt geeignete Reaktivierungsmethoden, um ein Element einer Komponente zu erhalten (wie this.findDomNode()), die seit der Arbeit an der Komponenteninstanz der Methode getElementById vorzuziehen sind.