在 React JSX 中使用 iframe 嵌入视频

Question

为幼稚的问题道歉，因为显然我遗漏了一些明显的东西。

我的简单无状态 iframe 组件：

const Video = ({ src }) => (
  <iframe
    allowFullScreen
    frameborder="0"
    height="315"
    src={src}
    width="560"
  />
);
export default Video;

我在 Parent 无状态组件中这样使用：

import Video from 'Video';

const Parent = (props) => (
  <div>
    <Video src="https://www.youtube.com/watch?v=WlRxNSRA7Rg"/>
  </div>
);

export default Parent;

这似乎可以正确渲染，但 iframe 是空白的。

我怀疑这与 React 支持的媒体事件有关，但我们将不胜感激。

Answer 1

由于 XSS 攻击，以这种方式设置 iframe 的 src 被认为是危险的。您将不得不使用危险的SetInnerHTML。阅读它here

看看this