Question

修改

我决定尝试将脚本标签添加到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... }

这两种方法都不起作用。在第一个示例中，script标签未显示在div中，第二个示例显示了script标签，但未呈现。

但是，当我像往常一样将script标签添加到HTML文件的开头时，Feed就会按照我的期望进行渲染。

背景

我们与一家向我们提供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);
  }

问题

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

Answer 1

通常使用React应用程序，您将拥有一个包含React组件的index.html文件。您应该将<script>引用放在html文件中。因此，我绝对会使用您提到的第一种方法。如果未加载，是否可以检查浏览器检查器并找出出现哪种错误？一方面，您应该从网址中删除空白。可能是问题所在。

将javascript导入加载到React应用中

1 个答案: