Javascript 我如何使用我添加的外部脚本来响应 JS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53396307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i use external script that i add to react JS?
提问by metalice
I would like to add to my react component a
我想在我的反应组件中添加一个
<script>http://xxx.xxx/XX.js</script>
<script>http://xxx.xxx/XX.js</script>
I know I can simply add it using JSX , what I don't know is how to use it,
我知道我可以简单地使用 JSX 添加它，我不知道如何使用它，
for instance this script has a function called A.Sort() , how can I call it and use it from a component?
例如，这个脚本有一个名为 A.Sort() 的函数，我如何调用它并从组件中使用它？
回答by Flow
You can load the script asynchronously and access it on load.
您可以异步加载脚本并在加载时访问它。
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
It should get attached to the window.
它应该附加到window.
scriptLoaded() {
window.A.sort();
}
or
或者
scriptLoaded() {
A.sort();
}
回答by Bilal
You can include the tag in the /public/index.html, and then use the script as you use it in normal JS code, following example for if you want to use jQuery:
您可以在 /public/index.html 中包含该标签，然后像在普通 JS 代码中一样使用该脚本，如果您想使用 jQuery，请参考以下示例：
in your public/index.html include the following:
在您的 public/index.html 中包含以下内容：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And then anywhere you can use the jQuery functionality as usual:
然后在任何地方您都可以像往常一样使用 jQuery 功能：
window.$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
回答by keul
You can either modify your index.html file (if you are using one) by adding the required script.
您可以通过添加所需的脚本来修改您的 index.html 文件（如果您正在使用）。
Alternatively, if you can't edit it or you are not using it, there's a bunch of add-ons that solve this, for example react-load-script
或者，如果你不能编辑它或者你没有使用它，有一堆附加组件可以解决这个问题，例如react-load-script
回答by Hany Moh.
Sometimes we need to work with external js libraries in such cases we need to insert script tags into components, but in react we use jsx, so we can't add script tags directly just like how we add in HTML.
有时我们需要使用外部js库，这种情况下我们需要在组件中插入script标签，但是在react中我们使用的是jsx，所以我们不能像在HTML中添加那样直接添加script标签。
In this example, we will see how to load an external script file into a head, body elements, or component.
在这个例子中，我们将看到如何将外部脚本文件加载到头部、主体元素或组件中。
componentDidMount() {
const script = document.createElement("script");
script.async = true;
script.src = "https://some-scripturl.js";
script.onload = () => this.scriptLoaded();
//For head
document.head.appendChild(script);
// For body
document.body.appendChild(script);
// For component
this.div.appendChild(script);
}
