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被认为是危险的。您将不得不使用dangerouslySetInnerHTML。阅读它here

并查看this

在React JSX中使用iframe嵌入视频

1 个答案: