我试图将Google趋势嵌入到React中,以便可以动态调整参数。我可以成功地将其直接嵌入index.html文件中。
<script
type="text/javascript"
src="https://ssl.gstatic.com/trends_nrtr/1644_RC01/embed_loader.js"
></script>
<script type="text/javascript">
trends.embed.renderExploreWidget(
"TIMESERIES",
{
comparisonItem: [{ keyword: "/m/030q7", geo: "", time: "now 7-d" }],
category: 0,
property: ""
},
{
exploreQuery: "q=%2Fm%2F030q7&date=now%207-d",
guestPath: "https://trends.google.com:443/trends/embed/"
}
);
</script>
但是,我需要能够通过用户输入进行更改,因此它必须位于我的jsx文件中。我发现了一个有用的头盔组件,可以帮助添加脚本
<Helmet>
<script
type="text/javascript"
src="https://ssl.gstatic.com/trends_nrtr/1644_RC01/embed_loader.js"
/>
<script type="text/javascript">
{trends.embed.renderExploreWidget(
"TIMESERIES",
{
comparisonItem: [
{ keyword: "/m/030q7", geo: "", time: "now 7-d" }
],
category: 0,
property: ""
},
{
exploreQuery: "q=%2Fm%2F030q7&date=now%207-d",
guestPath: "https://trends.google.com:443/trends/embed/"
}
)}
</script>
</Helmet>
但我越来越
未定义“趋势”
我曾尝试添加“ this”和“ window”,但得到不同的错误。
谁能协助我解决这个问题?
编辑
尽管提出的解决方案无法直接为我服务,但我还是设法通过生成的iframe广告代码并实现了该广告代码来使其正常工作。
<iframe
id="trends-widget-2"
src="https://trends.google.com:443/trends/embed/explore/TIMESERIES?req=%7B%22comparisonItem%22%3A%5B%7B%22keyword%22%3A%22bitcoin%22%2C%22geo%22%3A%22US%22%2C%22time%22%3A%22today%2012-m%22%7D%5D%2C%22category%22%3A0%2C%22property%22%3A%22%22%7D&tz=-480&eq=q%3Dbrexit%26geo%3DUS%26date%3Dtoday%2012-m"
width="100%"
height="300px"
frameborder="0"
scrolling="0"
/>
首先将脚本网址加载到您的html文件中。然后使用npm中的react-script-tag,然后将其写入组件的渲染器中:
<ScriptTag type="text/javascript">
{'trends.embed.renderExploreWidgetTo(
document.getElementById('widget'),
'TIMESERIES',
{'comparisonItem': [{'keyword':'chicken','geo':'','time':'today 12-m'}],'category':0,'property':''},
{'exploreQuery':'q=chicken&date=today 12-m','guestPath':'https://trends.google.com:443/trends/embed/'}
)'}
</ScriptTag>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句