将代码标签内的代码复制到剪贴板reactJS

Question

我是新来的reactJS。我用来react-copy-to-clipboard将代码复制到剪贴板。这很简单而且很棒。库链接： https: //github.com/nkbt/react-copy-to-clipboard#usage

这是他们文档中的代码。

<CopyToClipboard text="Hello!">

  <button>Copy to clipboard</button>

</CopyToClipboard>

这是我尝试过的代码

<Card>

    <div >

        <pre>

            <code>

                &lt;script src = "https://example.com/analaystics.js?analyticsId={this.state.tracking_id}"&gt;

                <br/>

                &lt;/script&gt;

            </code>

        </pre>

    </div>

</Card>

<CopyToClipboard text="&lt;script src = "https://example.com/analaystics.js?analyticsId={this.state.tracking_id}"&gt;

                    <br/>

                    &lt;/script&gt;">

    <Button type="primary" > Copy Code to Clipboard </Button>

</CopyToClipboard>,

我想将里面的内容复制Code Tag到剪贴板。我尝试了上面的方法。但它显示错误。如何制作。我找到了很多答案，但他们显示要复制文本区域中的内容。就我而言，它是code. 剪贴板中存储的内容应采用代码格式。帮我提供一些解决方案。

剪贴板内容：

<script src = "https://example.com/analaystics.js?analyticsId=analyse-1e7pf1oipk8x04rj6">

</script>

Answer 1

首先，让我们使用一个事实来源：获取需要从一个地方复制和显示的数据。一旦它是动态生成的值 - 您就可以使用函数来构建它。其次 - 为了在构建字符串时消除错误，<script></script>您可以将其生成拆分为一些子字符串。例如：class App extends React.PureComponent {&nbsp; state = {tracking_id: 123};&nbsp; getCode = () => `<script src="https://example.com/analaystics.js?analyticsId=${this.state.tracking_id}"></script` + `>`&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.getCode()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </code>&nbsp; &nbsp; &nbsp; &nbsp; </pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <CopyToClipboard text={this.getCode()}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="primary">Copy Code to Clipboard</button>&nbsp; &nbsp; &nbsp; &nbsp; </CopyToClipboard>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}