在将js脚本添加到html后，在react.js应用程序中它不起作用

Question

在我的react应用中，我有这样的代码

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

呈现我的HTML后看起来像

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

但是脚本不起作用，为什么？ 它不需要DOM，添加脚本后我尝试重新加载页面，但是什么也没发生。

1. 也许系统不了解它是脚本，并且还有另一种添加方法？
2. 也许脚本将直接在头部或身体中运行？

Answer 1

如果要使用类，则应将setInterval放在生命周期方法中，如果要使用钩子，则应将其放在效果钩子中：

课程：

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

挂钩：

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