如何将道具插入字符串以用作 iframe 调用

编程问答 2022-04-30

问题描述

我正在尝试将 twitch 流嵌入到 React 应用程序中，并且正在努力弄清楚如何让道具在 iFrame 调用中工作。

在我的 app.js 中，我有一个调用，例如，

<Stream name="streamname" />

在 stream.js 中，

<iframe
   src={"https://player.twitch.tv/?channel=" + { ... this.props } + "&parent=localhost"}
   height="540"
   width="960"
   allowFullScreen={false}
    frameBorder="0" >
</iframe>

当 src 设置为 "https://player.twitch.tv/?channel=channelname&parent=localhost" 时，一切正常。只是当我尝试添加道具时，事情就变得一团糟。

例如创建的嵌入链接是 https://www.twitch.tv/[object%20Object]/

解决方法

科林你的问题不太清楚你想达到什么目的，拜托 您可以使用模板文字，这是组合字符串和变量的更好方法 源={

`https://player.twitch.tv/?channel= ${ this.props.name }&parent=localhost`

} this.props 你正在传播什么

htmliframeiframejavascriptreactjsreactjsreactjsreactjstwitch