重新运行一个HTML <script> in React

Question

I'm making a component in React that has Pinterest Pins pulled from an API call. The API call returns and updates a list, which render() will then populate with tags that are supposed to be converted to actual images by a script from Pinterest's website. Something like this:

<a data-pin-do={'embedPin'} href={'https://www.pinterest.com/pin/12345'} />

My html file includes this script, which I assume runs through the HTML code and converts the tags to something viewable.

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

However, the problem I'm running into is that the script only runs when the webpage initially loads, and then never again. Since I'm adding more tags in an API call and then updating the list via the props, it means I'm left with a bunch of tags that don't get converted when the call returns.

I've inspected the React console & html and can confirm the tags are there, it's just that the dynamically converted tags don't show up as pins.

I've already tried using jquery and document.appendChild() to add/get the script in componentDidUpdate(), but it doesn't seem to be working. Anybody have any clue how I can get around this?

Answer 1

If you look in your devtools you should see that when the html page loads this script it is just making a GET request to the script src ( http://assets.pinterest.com/js/pinit.js ). So, you should be able to recreate that behavior by making a simple http GET request to that url each time you need to rerun the script.

Answer 2

Try using:a do-while in your script:

var repeat = 0
Do { 
// Your code goes here
repeat = repeat + 1
} while(repeat <= 10)

Note: replace 10 with times you want the script to repeat

If you wan't to add a rule to this (so it only runs when...) do:

var repeat = 'yes'
Do { 
// Your code goes here
} while(repeat == 'yes')

Now your code will only run when repeat is equal to yes

In action

<a href="javascript:repeat = 'no'">Stop repeating</a>
<a href="javascript:repeat = 'yes'">Start repeating</a>
<script>
var repeat = 'yes'
Do { 
// Your code goes here
If(var1 == var2) { repeat = 'no' }
} while(repeat == 'yes')
</script>