我正在制作一个 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.
谢谢！
我最终通过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>
);
}
}
如果有人有更好的解决方案，请随时分享。我会知道进一步的建议。
通过使用，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>
);
}
}
我应该提一下，正如属性名称所暗示的那样，强烈不鼓励使用它。
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>
);
}
}