在 React 组件中渲染脚本标签
Posted
技术标签:
【中文标题】在 React 组件中渲染脚本标签【英文标题】:Render script tag in React Component 【发布时间】:2019-05-17 05:44:42 【问题描述】:我正在制作一个 React 应用程序,我只需要在一个组件中运行 javascript
脚本,并引用 div
之一。
我知道有一些库可以这样做,但我想知道是否有更直接的方法可以做到这一点。现在我这样做:
import React, Component from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component
render()
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
<script src="js/myScript.js" />
</div>
);
但是什么也没发生。脚本存储在public/js/myScript.js
.
谢谢!
【问题讨论】:
Adding script tag to React/JSX的可能重复 你为什么不import脚本,然后调用它来触发它在来自componentDidMount
的div上的行为?
如果他想将脚本标签添加到该特定元素,则上述答案将不起作用。
【参考方案1】:
我终于在渲染组件之前通过添加componentDidMount
函数解决了这个问题。像这样:
import React, Component from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component
componentDidMount()
const script = document.createElement("script");
script.src = "js/myScript.js";
script.async = true;
document.body.appendChild(script);
render()
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
如果有人有更好的解决方案,请随时分享。我会注意进一步的建议。
【讨论】:
【参考方案2】:通过使用dangerouslySetInnerhtml
,您可以将任何您想要的有效html 添加到您的元素中。
import React, Component from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component
render()
return (
<div dangerouslySetInnerHTML="<script src='js/myScript.js' />" >
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
我应该提一下,正如属性名称所暗示的那样,强烈建议不要使用它。
【讨论】:
【参考方案3】:export default class MyComponent extends Component
componentDidMount()
const script = document.createElement("script");
script.innerHTML = "window.onload = function() \n" +
...
""
script.async = true;
document.body.appendChild(script);
render()
return (
<div>
</div>
);
【讨论】:
以上是关于在 React 组件中渲染脚本标签的主要内容,如果未能解决你的问题,请参考以下文章
在 s-s-r(服务器端渲染)的情况下,在 react index.html 中包含脚本标签的最佳做法是啥?
DOM 渲染后在 React 中执行 Vanilla JS 脚本
[react-router] React-Router的<Link>标签和<a>标签有什么区别