在将js脚本添加到html后的react.js App中，它不起作用

Question

In my react app I have a code like this

<div>{someVariable}</div>
const someVariabe = "<p id="test">Test</p>
<script>setInterval(() => alert('!!!'), 5000)</script>"

after rendering my HTML looks like

<div>
   <p id="test">Test</p>
   <script>setInterval(() => alert('!!!'), 5000)</script>
</div>

But the script doesn't work, why? It doesn't need DOM, I tried to reload the page after adding the script but nothing happens.

1. Maybe the system doesn't understand that it is script and there is another way to add it?
2. Maybe the script will be running just in head or body directly?

Answer 1

You should place your setInterval either in a lifecycle method, in case you use classes, or in an effect hook if you're using hooks:

Classes:

componentDidMount () {
  setInterval(() => alert('!!!'), 5000)
}

Hooks:

useEffect(() => {
  setInterval(() => alert('!!!'), 5000)
}, []) // [] to mimic didMount