Question

我正在尝试在React组件中使用clipboard.js，这会导致我的devserver失败并出现Node错误： 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

如果您正在进行服务器端渲染，则无法使用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

Answer 2

我创建了一个更新代码的小提琴。这是使用ref's和clipboardjs' text function整合clipboardjs和React的建议。

点击此处：https://jsfiddle.net/mrlew/L54ky6hj/

React组件中的clipboard.js错误？

2 个答案: