在React jsx中的script-tag内执行javascript代码

Question

我将此脚本标签添加到我的 React jsx 渲染中：

<script>alert('Hello world')</script>

为什么 Javascript 代码 未在我的 React 应用程序中执行？

更新：

我正在调试这个，因为我从 api 返回了这个 HTML：

<div class="my-class" data-src="/event/66478667"></div>
<script>(function(d, s, id) {var js,ijs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://embed.widget.js";ijs.parentNode.insertBefore(js, ijs);}(document, 'script', 'my-js'));</script>

现在我通过 html-react-parser 包如下：

return <div data-testid="html-paragraph">{parser(html)}</div>;

但这不起作用，因为 Javascript 代码没有执行？

怎么解决这个问题呢？

请参阅此处我的代码沙箱。

Answer 1

您可以通过 npm 包添加它。我将其用作（一次）：

import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';
 
class Demo extends Component {
 
    render() {
        return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
    }
}

这是 npm 包链接 https://www.npmjs.com/package/react-script-tag" rel="nofollow noreferrer">https://www.npmjs.com npmjs.com/package/react-script-tag

Answer 2

删除

所以：{alert('Hello world')}