为什么在运行时添加 <script> 标签不会加载 javascript 文件?(使用 react.js)

IT技术 javascript loading reactjs
2021-05-20 03:28:50

我有这个 react.js 脚本,它将以下代码添加到 html 中

// returned by the render method
React.DOM.div({
    dangerouslySetInnerHTML:  {
        __html: '<script type="text/javascript" async="" src="//myapp.disqus.com/embed.js"></script>'
    }
})

现在我的 html 看起来像:

<script type="text/javascript" async="" src="//myapp.disqus.com/embed.js"></script>

这看起来很完美,但问题是它没有加载脚本。script 标签被插入到正文的中间,嵌套在其他一些 div 标签中。

可能是什么问题? 谢谢

3个回答

使用 react 将脚本标签渲染到页面并不是正确的解决方案 - 我无法让它与 JSX 一起工作,我认为这同样适用于这里。不知道为什么,但只需以普通的旧 javascript 方式添加它:

    var script = document.createElement("script");

    script.src = "//myapp.disqus.com/embed.js";
    script.async = true;

    document.body.appendChild(script);

将它放在根组件的 componentWillMount 中。

我昨天刚刚将 Disqus 添加到我的 React 应用程序中。我使用了“react-disqus-thread”module并立即启动并运行了它。

这是在 github 上:https : //github.com/mzabriskie/react-disqus-thread

和 npm:https ://www.npmjs.com/package/react-disqus-thread

该组件采用以下props:

  • 短名称 - 这是 //myapp.disqus.com/embed.js 中的“myapp”
  • 标识符 - 一个唯一的 blogId,如果 url 发生变化,它可以识别您的博客文章
  • 标题
  • url - 如果你不提供这个,module将检测到 url 并提供它。

你测试的是哪个浏览器?如果您在脚本标签中使用 async="true",它不会阻塞。但这仅被几个浏览器支持。