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

【问题标题】：Loading javascript import into React application将 javascript 导入加载到 React 应用程序中
【发布时间】：2018-06-22 05:30:50
【问题描述】：

编辑

我决定尝试将脚本标签添加到 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，我们无法找出在它将存在的组件中使用这个标签的正确方法。

问题

当我们将脚本标签添加到 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);
  }

问题

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

【问题讨论】：

为什么你有$somevar（还有拼错的$somvar）和$addjquery？这让我有点困惑。 “将响应中的数据附加到我们网页的正文中”是什么意思？您需要首先确定您是否正确引用了脚本。如果脚本运行正确，它到底想做什么？
嗯，变量是定义的值，返回的脚本响应将根据这些值的设置而改变。附加我的意思是响应附加到页面的主体。所以基本上从脚本响应返回的数据会神奇地出现在网页的正文部分。此外，要澄清这不是有错误的东西。这只是一个问题，你如何在 React 中做一些文档中没有的事情。
有没有办法可以设置一个 jsbin 或 jsfiddle 让我们可以看到问题？ jsbin 有 React，所以建立一个例子应该不会太难。

标签： javascript reactjs

【解决方案1】：

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

【讨论】：