Infogram嵌入代码未在React中呈现 [英] Infogram embed code not rendering in React
问题描述
我从信息报中获取了以下嵌入代码,这些代码未在我的react应用程序上呈现.
I have the following embed code from infogram which is not rendering on my react app.
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)&&(i=d+i),window[n]&&window[n].initialized)window[n].process&&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解析库进行反应,在其他所有情况下都可以正常工作.
I am using a html parsing library for react which works perfectly fine in all other cases.
有人知道为什么这行不通吗?
Any idea why this is not working?
谢谢
推荐答案
不确定这是否有帮助,这是我如何使其与React一起使用 https://jsfiddle.net/wonderwhy_er/4dt28xzL/6/
Not sure if this helps, here is how I made it work with React https://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)&&(i=d+i),window[n]&&window[n].initialized)window[n].process&&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渲染中执行它,所以我只是将其移到了页面标题或其他内容上.
I moved script part away, it just requests a loader from Infogram and you do not need to do it inside of React render, so I just moved it to header of page or something.
在嵌入的末尾您还有其他内容,我已经对其进行了修复,并且可以正常工作.检查链接.
You also have something else at the end of the embed which I remeved and it works. Check link.
这篇关于Infogram嵌入代码未在React中呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!