Блог

У меня есть следующий код для встраивания из infogram, который не отображается в моем приложении react.

 code looks as below:
<div class="infogram-embed" data-id="861ca70e-552c-4a4f-960a-4c7e7ff62881" data-type="interactive" data-title="Step by Step Charts"></div><script>!function(e,t,s,i){var n="InfogramEmbeds",o=e.getElementsByTagName("script")[0],d=/^http:/.test(e.location)?"http:":"https:";if(/^/{2}/.test(i)amp;amp;(i=d i),window[n]amp;amp;window[n].initialized)window[n].processamp;amp;window[n].process();else if(!e.getElementById(s)){var r=e.createElement("script");r.async=1,r.id=s,r.src=i,o.parentNode.insertBefore(r,o)}}(document,0,"infogram-async","https://e.infogram.com/js/dist/embed-loader-min.js");</script><div style="padding:8px 0;font-family:Arial!important;font-size:13px!important;line-height:15px!important;text-align:center;border-top:1px solid #dadada;margin:0 30px"><a href="https://infogram.com/861ca70e-552c-4a4f-960a-4c7e7ff62881" style="color:#989898!important;text-decoration:none!important;" target="_blank">Step by Step Charts</a><br><a href="https://infogram.com" style="color:#989898!important;text-decoration:none!important;" target="_blank" rel="nofollow">Infogram</a></div>
  

Я использую библиотеку синтаксического анализа html для react, которая отлично работает во всех других случаях.

Есть идеи, почему это не работает?

Спасибо

Не уверен, поможет ли это, вот как я заставил это работать с Reacthttps://jsfiddle.net/wonderwhy_er/4dt28xzL/6 /

Или код в HTML

 <script>!function(e,t,s,i){var n='InfogramEmbeds',o=e.getElementsByTagName('script')[0],d=/^http:/.test(e.location)?'http:':'https:';if(/^/{2}/.test(i)amp;amp;(i=d i),window[n]amp;amp;window[n].initialized)window[n].processamp;amp;window[n].process();else if(!e.getElementById(s)){var r=e.createElement('script');r.async=1,r.id=s,r.src=i,o.parentNode.insertBefore(r,o)}}(document,0,"infogram-async","https://e.infogram.com/js/dist/embed-loader-min.js");</script>


<div id="app"></div>
  

В JS

 class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <div class="infogram-embed" data-id="861ca70e-552c-4a4f-960a-4c7e7ff62881" data-type="interactive" data-title="Step by Step Charts">
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
  

Я убрал часть скрипта, он просто запрашивает загрузчик из Infogram, и вам не нужно делать это внутри React render, поэтому я просто переместил его в заголовок страницы или что-то в этом роде.

В конце встраивания также есть кое-что еще, что я исправил, и это работает. Проверьте ссылку.