在 Reactjs 中使用脚本标签答案

【问题标题】：Using Script Tags in Reactjs在 Reactjs 中使用脚本标签
【发布时间】：2019-12-03 20:56:12
【问题描述】：

不熟悉编码和一般反应。我想知道如何从我的 index.html 中获取这个脚本（小部件）以出现在组件中

index.html

// <div id="cibtWidgetHolder"></div>

    <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
      var widgetHost = (("https:" == document.location.protocol) ? "https://" : "http://");
      document.write(unescape("%3Cscript src='" + gaJsHost + "stats.g.doubleclick.net/dc.js' 
      type='text/javascript'%3E%3C/script%3E"));
      document.write(unescape("%3Cscript src='"+ widgetHost + "cibtvisas.com/widget/widgetv2.js? 
method=js&cibtCitizenship=USA&cibtCode=65490&cibtURL=balboa.com&cibtBG=e1f0f2&cibtHeader=1c171c&lang=en&cibtWidgetVersion=3' type='text/javascript'%3E%3C/script%3E"));
      </script>

sections.js

  <Col md="3">
  <div id="cibtWidgetHolder"></div>
  </Col>

如果我在 index.html 中调用 div，它会呈现，但仅在页面底部，而不是与 section.js 中的其他内容一起呈现

我已经看到其他人提出类似问题的这种用法，但不知道如何用我的实现：

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};
export default useScript;

感谢任何帮助！

【问题讨论】：

这不应该出现在渲染部分中。
你能澄清一下吗？如果在它自己的组件中创建它可以工作，那么在 section.js 中调用该组件就可以了，我会这样做，但我仍然不知道下一步是什么。谢谢
您也许可以从此 SO stackoverflow.com/questions/46035999/… 改进

标签： javascript reactjs

【解决方案1】：

如果您决定将脚本元素添加到 react 应用程序，那么可能值得查看 react-helmet 或 react-helmet-async。

这个库可以让你以最简洁的方式将脚本元素和其他元标记添加到 html 中。

话虽如此，在此过程中使用 useEffect 或 onComponentMount 可能是一种更有效的方法。

希望对你有帮助

【讨论】：