时间戳

首页 > 解决方案 > 将 javascript 导入加载到 React 应用程序中

javascript - 将 javascript 导入加载到 React 应用程序中

问题描述

编辑

我决定尝试将脚本标签添加到 index.html 文件并有条件地渲染它们。

<script type="text/javascript">
    var $show_stuff = 'no';
    var $add_stuff = 'yes';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.example.com/includes.php?stuff=true';
    document.getElementById('feed').appendChild(script);
</script>

然后在我想要显示提要的组件中，我这样做了，

<div id="credit-feed" />

我还尝试像这样有条件地渲染 index.html 文件中的脚本标记，

if(window.location.href === "localhost:3000/my/path" ) { script tag... }

这些都不起作用。在第一个示例中，脚本标签未显示在 div 中，第二个示例中确实显示了脚本标签，但未呈现。

但是，当我像往常一样将脚本标签添加到 HTML 文件的头部时，提要会按照我的预期呈现。

背景

我们与一家公司开展业务，该公司为我们提供了一个 Javascript 脚本标签，该标签将来自其响应的数据附加到我们网页的正文中。在过去的 8 年中，我们的 PHP 站点一直没有出现任何问题，但现在我们正在切换到 React，我们无法弄清楚在它将存在的组件中使用这个标签的正确方法。

问题

当我们将 script 标签添加到 React 组件时，它不会将正确的数据附加到页面。事实上，它不会将任何数据附加到页面。

例子

我试图像往常一样加载脚本标签，

 <script type="text/javascript">      
  var $somevar = "false";
  var $addjquery = "yes";      
  </script>
   <script 
          type="text/javascript" src="https://www.example.com/do/deef.php?feedtype=all ">
    </script>

我在 React 组件中尝试过的另一种方法，

  componentWillMount() {
    const script = document.createElement('script');

    const $somevar = 'false';
    const $addjquery = 'yes';

    script.src = 'https://www.example.com/get/feed.php?&data=all';
    script.async = true;

    document.body.appendChild(script);
  }

问题

加载脚本标签以便将数据附加到我的应用程序的正确方法是什么？

标签： javascriptreactjs

解决方案

通常对于 React 应用程序，您将拥有一个包含 React 组件的 index.html 文件。您应该将<script>引用放在 html 文件中。所以我肯定会使用你提到的第一种方法。如果它没有加载，您可以检查浏览器检查器并找出您遇到的错误类型吗？一方面，您应该从 URL 中删除空白区域。这可能是问题所在。

推荐阅读