A
A
Andrey2018-08-22 13:52:04
JavaScript
Andrey, 2018-08-22 13:52:04

How to handle user content in SPA?

When developing the SPA, a problem arose: if there are code inserts in the user content that connect additional scripts, then they work only during server rendering, and subsequently the script does not run on the client and the widget is not shown.
For example, this is how the Twitter widget code looks like to be inserted on the page:

<blockquote class="twitter-tweet" data-lang="ru">
<p lang="en" dir="ltr">AG Ferguson announces lawsuit against Trump Administration to stop distribution of downloadable “ghost guns,” which anyone can print with a 3D printer <a href="https://t.co/MdSExlQ1jO">pic.twitter.com/MdSExlQ1jO</a></p>
— WA Attorney General (@AGOWA) <a href="https://twitter.com/AGOWA/status/1023993814438952962?ref_src=twsrc%5Etfw">30 июля 2018 г.</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

At the end of it there is a script connection https://platform.twitter.com/widgets.js, which downloads, runs, parses the page and converts blocks with the twitter-tweet class into Twitter widgets. But if this text* is inserted by React on the client, then the script will not run.
Theoretically, we can check that this is a Twitter widget and force it to be activated using twttr.widgets.createTweet , but this is not a solution to the problem in general, but only to a specific case.
*code block comes from the server as text and is inserted using dangerouslySetInnerHTML

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question