React中渲染iframe字符串不生效问题求助

这问题我之前开发React+Meteor项目时也碰到过，核心原因很明确——React默认会自动转义所有插入的文本内容，以此来防范XSS攻击。你从Videos集合里拿到的video.embed是包含iframe标签的字符串，直接用{video.embed}渲染时，React会把它当成纯文本输出，而不会解析成DOM元素，这就是你看到代码字符串而非实际播放器的原因。

解决方法：使用dangerouslySetInnerHTML #

React专门提供了dangerouslySetInnerHTML属性来处理直接插入HTML内容的场景，你只需要修改renderVideos方法的返回逻辑：

renderVideos = () => {
  return this.state.videos.map((video) => {
    return <div key={video._id} dangerouslySetInnerHTML={{ __html: video.embed }}></div>;
  });
};

重要提醒 #

这个属性名字里的“dangerously”不是噱头：

• 必须确保video.embed的内容是完全可信的（比如是你后台自己生成、上传的，或者经过严格HTML过滤的）
• 如果允许用户提交video.embed内容，一定要做XSS防护，避免恶意代码注入

补充：为什么手动写iframe能正常渲染？ #

你直接在return里写的<iframe ...>是JSX语法，React会把它编译成对应的React元素，最终转化为DOM节点，这和字符串形式的iframe本质上是两种不同的处理逻辑~

内容的提问来源于stack exchange，提问作者flimflam57