我需要在 div 中渲染脚本

Question

您好，我需要渲染一个包含脚本的 div 元素：

类似：

 <div id="div-id-for-squaretile1" style="width: 300px; height: 250px;">
    <script>
      googletag.cmd.push(function() {
        googletag.display('div-id-for-squaretile1');
      });
    </script>
  </div>

我在我的组件中使用了一个钩子：

const GooglePublisherTag = ({ id }) => {
  useGptSlot(id);
  return <div id={id} />;
};

useGptSlot Hook 看起来像：

const useGptSlot = (id) => {
  useEffect(() => {
    const googletag = window.googletag || { cmd: [] };
    googletag.cmd.push(() => {
      googletag.display(id);
    });
  }, [id]);
};

但是我的代码不会在 div 中呈现脚本：

它改为输出：

<div id="div-id-for-squaretile1" data-google-query-id="CLGYq8Hhv-cCFcfbwAodGgcK0g" style="width: 250px; height: 250px;">
  <div id="google_ads_iframe_/21848388897/Development/Geo-Landing_0__container__" style="border: 0pt none; width: 250px; height: 250px;"></div>
</div>

我如何做到这一点？

Answer 1

假设的方式是dangerouslySetInnerHTML。但是，这行不通，因为您需要手动创建带有document.createElement() 的<script> 标签，因为scripts added through innerHTML won't actually be interpreted 另请参阅MDN。

相反，您可能会考虑使用useCallback ref 来获取您将创建的元素的句柄，然后手动创建<script> 标记并将其附加到您想要的位置。考虑下面的示例，它将添加一个 <script> 标签作为我们想要的元素的子元素，并将其 src 设置为 jQuery。我认为您的 AdSense 并不关心其脚本何时加载，但对于本示例，我们等待一秒钟，然后确保 jQuery 确实存在于我们的上下文中（这表明脚本已运行）。

const {useState, useEffect, useCallback, Fragment} = React;

function Scripter() {
  const script = useCallback(el => {
    console.log("cb");
    if(!el) {
      console.log("No el");
      return;
    }
    const s = document.createElement("script");
    el.appendChild(s);
    s.src = "https://code.jquery.com/jquery-3.4.1.js";
    
    setTimeout(() => {
      console.log("jQuery should have been loaded by now");
      console.log(typeof $);
    }, 1000);
  }, []);
  
  return (
    <div ref={script}>Hello</div>
  );
}

function App() {
  return <Scripter />;
}

ReactDOM.render(<App />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>

<div id="app"></div>

---

但是，为什么还要麻烦脚本标签呢？ googletag.display(divOrSlot) 接受一个元素，所以我只需运行脚本标签将包含在组件中的代码。

（下面的代码可能不会作为堆栈 sn-p 执行，因为它可能违反某些帧策略）

const {useCallback} = React;

window.googletag = window.googletag || {cmd: []};

function useGpt(el) {
  if (!el) {
    console.log("No el provided");
    return;
  }
  
  googletag.cmd.push(function() {
    googletag.display(el);
  });
}

function DummyElement() {
  const cb = useCallback(useGpt, []);
  
  return (
    <div ref={cb}>Should get tagged</div>
  );
};

function App() {
  return <DummyElement />;
}

ReactDOM.render(<App />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

<div id="app"></div>