Миниатюра видео Kaltura в теге скрипта не работает в React, но отображает пустое пространство

Question

Я использую встроенный в React эскиз Kaltura, который является тегом сценария, когда я использую тот же тег сценария на странице Basic HTML, он работает нормально, но когда я использую тот же тег сценария в React, он показывает пустое пространство вместо video, когда я проверил элемент, я смог увидеть все элементы css и div для этого скрипта. Вот тег скрипта, который я использовал в React. Я здесь новичок, пожалуйста, помогите. Заранее спасибо.

function App() {
  var x='<script src="https://cdnapisec.kaltura.com/p/3064193/sp/306419300/embedIframeJs/uiconf_id/46610723/partner_id/3064193"></script>
<div id="kaltura_player_1605008383" style="width: 560px; height: 395px;"></div>
<script>
kWidget.thumbEmbed({
  "targetId": "kaltura_player_1605008383",
  "wid": "_3064193",
  "uiconf_id": 46610723,
  "flashvars": {},
  "cache_st": 1605008383,
  "entry_id": "1_0clle8xt"
});
</script>'


return (
<div dangerouslySetInnerHTML={{__html: x}}></div>
);
}

export default App;

Answer 1

Есть много причин, по которым этот код не работает. Код установки Kaltura должен быть заключен в литералы шаблона обратной кавычки. Но даже в этом случае react не настроен на синтаксический анализ <script> включает в себя.

Один из способов - использовать этот проект: https://github.com/christo-pr/dangerously-set-html-content#readme, который предназначен для решения этой проблемы.

И если вы используете react native, вот проект, который может сработать: https://github.com/rafalkaczynsky/react-native-kaltura-player-v3