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 {
  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>
    );
  }
}

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

1 个答案: