Как вставить готовый скрипт виджета?

Question

[gregorzamza2]

Подскажите пожалуйста как адаптировать данный скрипт под реакт? Я новичок. Указываю путь к самому скрипту, вставляю див класс в нужную для выводу страницу, но нет отображения самого скрипта, кроме как копирайта tradingview.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://ru.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"><span class="blue-text">Рынки криптовалют</span></a> предоставлены TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async>
  {
  "width": "100%",
  "height": "100%",
  "defaultColumn": "overview",
  "screener_type": "crypto_mkt",
  "displayCurrency": "USD",
  "locale": "ru"
}
  </script>
</div>
<!-- TradingView Widget END -->

Answer 1

[Роман Александрович]

https://magic.reactjs.net/htmltojsx.htm
https://github.com/tradingview/charting-library-ex... тут есть пример для реакта

Comments

[gregorzamza2]

Первая ссылка не работает. На гитхабе не очень понятные примеры. Там пример создания приложения на основе графиков tradingview. У меня же код виджета для вывода чарта криптовалют и мне его нужно просто внедрить уже по сути в готовое приложение. Скачал шаблон VK Apps для создания приложения внутри соц сети вконтакте. По сути должно быть все куда проще. Или этот скрипт вставлять как отдельный компонент?

[Роман Александрович]

gregorzamza2, у вас должна быть папка Public и в ней index.html можете попробовать туда засунуть

[gregorzamza2]

Роман Александрович, Так в принципе и делаю как вы описали. Если вставляю в index.html строки закрытые тегом script, а остальную часть кода (все внутри тега div) в файл home.js(выводит я так понимаю все на главной странице приложения). Получаю в итоге пустой копирайт вместо списка криптовалют .

Если вставляю весь код в index.html, тоже в принципе не работает, но страница как бы разваливается.


На сайте tradingview есть предупреждение относительно работы виджета. Может как то оно связано с тем, что не работает?

Проблема может возникнуть при попытке динамического добавления непроверенного кода, как следствие браузер блокирует выполнение добавленного скрипта. Например, это может случиться, когда добавление осуществляется при помощи innerHTML. Пытаясь динамически добавить код при помощи определённых библиотек (например, jQuery), вы можете также помешать корректной инициализации виджета. Если вы добавляете код на сайт, использующий стороннюю инфраструктуру, убедитесь в том, что вы соблюдаете их правила, или обратитесь за помощью к разработчику платформы.

[Роман Александрович]

gregorzamza2, мне кажется что просто виджета не хватает. Нужна еще и библиотека которая бы работала с апи и отрисовывала графики.

[Роман Александрович]

gregorzamza2, у вас есть скачанная данная библиотека?
там ждать 2 дня надо для выдачи

[gregorzamza2]

Роман Александрович, Думаю все же библиотека не нужна. Графики там тоже не используются. По сути обычный виджет как к примеру виджеты того же вк для вывода сообществ на сайте. Выглядит в рабочем состоянии он как на скрине. Не думаю что ему нужна библиотека для подключения. Скорее всего нужно подключать его как то по другому. Как компонент отдельный может, но я не знаю как.