При попытке вставить плеер yohoho в react ничего не происходит

<div id="yohoho" data-title="Тайна Коко"></div>
<script src="//yohoho.cc/yo.js"></script>

Вот, что предалгают сделать.

Если вставить это в обычный html, то все работает. Но при попытке взаимодействовать с плеером через React, ничего не происходит. Попытался подключить скрипт как в самом index.html, так и в компоненте. Что я пытаюсь :

  return (
    <div className="collection-container">
      <div className="video">
        <div id="yohoho" data-title="Тайна Коко"></div>
        <script src="//yohoho.cc/yo.js"></script>
      </div>
    </div>
  );
};```

Как быть?

Ответы (1 шт):

Автор решения: rewolc

тег script не рендерится в компоненте, его нужно добавлять в дом вручную

    useEffect(() => {
  const script = document.createElement('script')
  script.src = "https://yohoho.cc/yo.js"
  document.body.appendChild(script)
  return () => { document.body.removeChild(script) }
}, [])

Через хук добавить в каком-либо компоненте и все заработает, остается только вставить

<div id="yohoho" data-title="Тайна Коко"></div>

в нужном месте

→ Ссылка