javascript - 将代码标签内的代码复制到剪贴板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>,

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

要剪贴板的内容:

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

Answer 1

首先，让我们使用一个事实来源:获取需要从一个位置复制和显示的数据。一旦它是动态生成的值 - 您就可以使用函数来构建它。

第二 - 为了消除构建时的错误 <script></script>字符串，您可以将其生成拆分为一些子字符串。

例如:

class App extends React.PureComponent {
  state = {tracking_id: 123};

  getCode = () => `<script src="https://example.com/analaystics.js?analyticsId=${this.state.tracking_id}">
</script` + `>`

  render() {
    return (
      <div>
        <pre>
          <code>
            {this.getCode()}
          </code>
        </pre>          
        <CopyToClipboard text={this.getCode()}>
          <button type="primary">Copy Code to Clipboard</button>
        </CopyToClipboard>
      </div>
    );
  }
}