react-copy-to-clipboard 复制html

你可以使用 react-copy-to-clipboard 库来复制 HTML 文本。以下是一个示例代码：

import React, { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";

function App() {
  const [htmlText, setHtmlText] = useState("<p>Hello World!</p>");
  const [isCopied, setIsCopied] = useState(false);

  const handleCopy = () => {
    setIsCopied(true);
    setTimeout(() => {
      setIsCopied(false);
    }, 3000);
  };

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: htmlText }}></div>
      <CopyToClipboard text={htmlText} onCopy={handleCopy}>
        <button>{isCopied ? "Copied!" : "Copy HTML"}</button>
      </CopyToClipboard>
    </div>
  );
}

export default App;

在上面的代码中，我们使用 `dangerouslySetInnerHTML` 属性将 HTML 字符串渲染到页面上。然后，在复制按钮中，我们使用 `CopyToClipboard` 组件来设置要复制的文本和复制成功后的回调函数。在回调函数中，我们设置 `isCopied` 状态为 `true`，并在 3 秒后将其设置为 `false`，以便用户知道复制已成功。