将任意脚本标签注入 React 应用程序答案

【问题标题】：Injecting arbitrary script tags into a React app将任意脚本标签注入 React 应用程序
【发布时间】：2021-05-29 17:17:57
【问题描述】：

我想在我的 React 应用程序中嵌入一个 StreamingVideoProvider 视频播放器，但是：

我无法直接访问视频网址
我不想绕过他们的 JS 视频播放器，因为它提供了很多功能，例如密码保护、字幕和其他我没有找到任何替代方案的功能（所有其他提供密码保护的视频托管服务都不要不要让我创建任意数量的密码来保护每个视频）
他们不提供任何我可以直接使用的 React 组件

他们提供给我的唯一东西是以下嵌入代码，通常会进入一个简单的 HTML 页面：

<!--player code begin-->
<div id="svp_playerdrxtsr0w13c4" style="width:720px;height:810px;position:relative;"></div>
<script language="javascript" type="text/javascript" src="//play.streamingvideoprovider.com/js/dplayer.js"></script>
<script language="javascript">
<!--
var vars = {clip_id:"drxtsr0w13c4",transparent:"true",pause:"1",repeat:"",bg_color:"#ffffff",fs_mode:"2",no_controls:"",start_img:"0",start_volume:"34",close_button:"",brand_new_window:"1",auto_hide:"1",stretch_video:"",player_align:"NONE",offset_x:"0",offset_y:"0",player_color_ratio:0.6,skinAlpha:"50",colorBase:"#250864",colorIcon:"#ffffff",colorHighlight:"#7f54f8",direct:"false",is_responsive:"true",viewers_limit:0,cc_position:"bottom",cc_positionOffset:70,cc_multiplier:0.03,cc_textColor:"#ffffff",cc_textOutlineColor:"#ffffff",cc_bkgColor:"#000000",cc_bkgAlpha:0.1,aspect_ratio:"16:9",play_button:"1",play_button_style:"pulsing",sleek_player:"1",auto_play:"",auto_play_type:"unMute",floating_player:"none"};
var svp_player = new SVPDynamicPlayer("svp_playerdrxtsr0w13c4", "", "100%", "100%", {use_div:"svp_playerdrxtsr0w13c4",skin:"3"}, vars);
svp_player.execute();
//-->
</script>
<noscript>Your browser does not support JavaScript! JavaScript is needed to display this video player!</noscript>
<!--player code end-->

是否可以编写一个组件让我将这样的视频播放器嵌入到我的 React 应用程序中？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

简单的方法是dangerouslySetInnerHTML（请仔细阅读）。其他方法会将其重构为反应组件。 React 只是一种渲染某些东西并在之后触发一些副作用的方法。如果您想采用这种方法 - 请进一步阅读。

您要做的第一件事 - 将他们的播放器脚本添加到您的 html 一次（它位于第三行）。接下来，创建一个组件，该组件将为播放器呈现您的标记位置。您将 vars 作为道具传递给组件。从props.clip_id 为您的展示位置构建 id，这样您就可以参考它生效。创建将初始化播放器的效果。

这是working example。您将需要根据您的特殊需求对其进行调整。可能您想要执行清理或其他操作 - 为此您可以将播放器实例存储在 ref 中，并在道具更改或执行清理时在其他效果中操作它。

【讨论】：