如何使用添加的外部脚本来响应 JS？

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:

in your public/index.html include the following:

<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:

window.$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});

You can either modify your index.html file (if you are using one) by adding the required script.

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

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.

 scriptLoaded() {
window.A.sort();
}

or

scriptLoaded() {
A.sort();
}

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.

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);


}

After adding this script into your index.html

<script>http://xxx.xxx/XX.js</script>

you might check the available functions if you console.log(window) in App.js (or, wherever you want). Once you check the exact function, then you can use it like

window.A.sort();

I think this could be the simplest way. Just remember that you have to write 'window.' on the left side of your function.

You can use React Helmet npm

step 1 : npm i react-helmet

step 2 :

<Helmet>
<script src="/path/to/resource.js" type="text/javascript" />
</Helmet>

A hooks version.

import * as React from "react";


function loadError(onError) {
console.error(`Failed ${onError.target.src} didn't load correctly`);
}


function External() {
React.useEffect(() => {
const LoadExternalScript = () => {
const externalScript = document.createElement("script");
externalScript.onerror = loadError;
externalScript.id = "external";
externalScript.async = true;
externalScript.type = "text/javascript";
externalScript.setAttribute("crossorigin", "anonymous");
document.body.appendChild(externalScript);
externalScript.src = `https://externalurl.example.com/external.js?key=9393ABCDEFGH`;
};
LoadExternalScript();
}, []);


return <></>;
}


export default External;