在 React 中渲染 HTML 和脚本

Answer 1

• 您应该创建一个事件监听器并在之后执行脚本 加载到 useEffect 钩子内。
• 然后您应该将标记放置在组件的 jsx
中

您的代码示例：

import { useEffect } from "react";

export default function Cta() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://js.hscta.net/cta/current.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      window.hbspt?.cta?.load(..., {
        useNewLoader: "true",
        region: "na1",
      });
    });
 }, []);

  return (
    <>
      <div className="...">
        <div id="hs-cta" className="...">
          <span
            className="hs-cta-wrapper"
            id="hs-cta-wrapper-..."
          >
            <span
              className="..."
              id="hs-cta-..."
            >
              <div id="hs-cta-ie-element"></div>
              <a href="https://cta-redirect.hubspot.com/cta/redirect/...">
                <img
                  className="hs-cta-img"
                  id="hs-cta-img-..."
                  style={{ borderWidth: "0px" }}
                  src="https://no-cache.hubspot.com/cta/default/..."
                  alt="New call-to-action"
                />
              </a>
            </span>
          </span>
        </div>
      </div>
    </>
  );
}