Question

我有一个API响应，它返回了我希望包含在我的React应用程序中的iFrame嵌入。返回看起来像是设置为this.props.thread.data.secure_media_embed.content

的属性

<iframe class="embedly-embed" src="https://...." width="600" height="1067" scrolling="no" frameborder="0" allowfullscreen></iframe>

我已经设置了一个函数来呈现这种类型的内容，如下所示：

renderExpandableContent() {
    const { thread } = this.props;

    if (thread.data.post_hint == 'image') {
        return <img src={thread.data.url} className="img-responsive" />;

    } else if (thread.data.post_hint == 'rich:video') {
        return <div dangerouslySetInnerHTML={ {__html: thread.data.secure_media_embed.content } } />;
    }
};

我遇到的问题是iFrame最终会在页面上呈现为字符串而不是实际的iFrame。我在这里缺少什么或者其他方式来处理这类内容吗？我已经按照使用dangerouslySetInnerHTML的几条说明进行操作，但似乎没有人使用这个技巧。

Answer 1

概念证明

所以假设这实际上是你要回来的，你所做的应该是有用的。以下是我创建的示例：https://codesandbox.io/s/o7jn8k9m79。

那么为什么它不起作用？

我的猜测是服务器是html编码你要回来的内容。尝试控制台记录（或检查原始响应），看看你得到的是什么bak：

<iframe class="embedly-embed" src...></iframe>

或者如果是这样的话：

&lt;iframe class=&quot;embedly-embed&quot; src...&gt;&lt;/iframe&gt;

如果是后者，则需要不要逃避您返回的内容。

更好的做事方式

dangerouslySetInnerHTML顾名思义危险。在您的特定情况下，似乎没有发生任何危险（除非iframe的属性可以由用户输入控制，在这种情况下您可能会有XSS）。但随着代码库的增加和更多开发人员的加入，最好完全禁止使用dangerouslySetInnerHTML（或严格限制它）并在可能的情况下使用替代方案。

我建议不要让服务器返回原始html，而是建议在JS对象中返回动态设置的属性值，如下所示：

{
    src: 'https://...',
    width: 600,
    height: 1067
}

然后（假设此对象设置为一个名为iframeProps的变量）在您的反应中返回如下内容：

return <iframe
       className='embedly-embed'
       scrolling='no'
       frameborder='0'
       allowfullscreen 
       { ...iframeProps }
       />;

使用ES6 spread operator。或者，您也可以为每个动态设置的属性设置src={ iframeProps.src }。

希望这有帮助！

无法使用React内联iFrame

1 个答案:

概念证明

那么为什么它不起作用？

更好的做事方式