时间戳

首页 > 解决方案 > 使用 ReactJS 加载具有 document.write 的外部脚本

javascript - 使用 ReactJS 加载具有 document.write 的外部脚本

问题描述

我正在尝试使用以下脚本加载 cricruns 小部件，该脚本document.write将在我给出的特定容器中加载小部件。如何render()在 ReactJS 中实现这一点？

<script src="//www.cricruns.com/system/application/views/widgetBase/wid_300_200_1.js" type="text/javascript"></script>

请检查这个小提琴以了解更多关于我想要实现的目标。

提前致谢。

标签： javascripthtmlreactjsdomreact-dom

解决方案

***更新：好的，我已经玩了一点。如果您只是绕过 document.write 并使用 dangerouslySetInnerHTML 直接添加 iframe，它就可以工作。我在下面添加了一个工作代码框和一个代码示例。

我希望它有帮助！

https://codesandbox.io/s/z6k1w94z8m

import React from "react";
import { render } from "react-dom";

const App = () => {
  return <div dangerouslySetInnerHTML={{__html: `
  <iframe src="https://www.cricruns.com/widgetbase/wid_300_200_1"; width=250&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=320 " scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:310px; height:250px;" allowTransparency="true"></iframe>
  `}} />;
};

render(<App />, document.getElementById("root"));

推荐阅读