Fehler mit der Zwischenablage.js in React-Komponente?

Question

Ich versuche clipboard.js in einer Reaktion Komponente zu verwenden, und es bewirkt, dass mein devserver mit dem Knoten Fehler starten Fehler: ReferenceError: Element is not defined at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)

mir die Zwischenablage in componentDidMount initialisieren aber bin immer noch diesen Fehler. Ich glaube tatsächlich, dass der Fehler etwas mit meinem Import zu tun hat, denn selbst wenn ich die Zwischenablage nicht initialisiere (aber den Import mit einschließe), erhalte ich den Fehler. Hat jemand eine Idee, was ich falsch machen könnte?

Relevante Code (Styling ausgeschlossen):

import React, { Component } from 'react'; 
import Clipboard from 'clipboard'; 

export default class CodeSnippet extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     new Clipboard('.copyButton', { 
      target:() => document.getElementById('snippet') 
     }); 
    } 

    render() { 
     return (  
      <div style={styles.snippetCopy}> 
       <div id="snippet" style={styles.snippet}> 
        {'this text will copy'} 
       </div> 
       <button 
        className={"copyButton"} 
        id="clipper" 
        data-clipboard-text='snippet' 
        style={styles.buttonStyle} 
        text={'Copy code'}> 
       </button> 
      </div> 
     ); 
    } 
} 

Answer 1

Sie können nicht clipboard.js benötigen, wenn Sie serverseitige Rendering tun. Es ist ärgerlich, sondern über npm zu installieren, sie schlagen vor, einschließlich das Skript manuell wie folgt aus:

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> 

https://github.com/zenorocha/clipboard.js/issues/157

Answer 2

habe ich eine Geige Code zu aktualisieren. Es ist ein Vorschlag der Integration clipboardjs und React, mit ref's und clipboardjs' text function.

prüfen: https://jsfiddle.net/mrlew/L54ky6hj/