How do I use external script that I add to react JS?

Question

I would like to add to my react component a

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

for instance this script has a function called A.Sort() , how can I call it and use it from a component?

Answer 1

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

Answer 2

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