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

  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>

    );

  }

}