React 组件中 clipboard.js 的错误？

Question

我正在尝试在 React 组件中使用 clipboard.js，它导致我的开发服务器开始失败并出现节点错误： ReferenceError: Element is not defined at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)

我在 componentDidMount 中初始化了剪贴板，但仍然出现此错误。我实际上认为错误可能与我的导入有关，因为即使我实际上没有初始化剪贴板（但包括导入）我也会收到错误。有谁知道我可能做错了什么吗？

相关代码（样式除外）：

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

我创建了一个 fiddle 更新您的代码。建议整合clipboardjs和React，使用ref's and clipboardjs' text function.

在这里查看：https://jsfiddle.net/mrlew/L54ky6hj/

Answer 2

如果您正在进行服务器端呈现，则不能要求 clipboard.js。这很烦人，但他们建议像这样手动包含脚本，而不是通过 npm 安装：

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

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

React 组件中 clipboard.js 的错误？

Errors with clipboard.js in React component?

javascript

components

reactjs

clipboard.js