在ReactJS JSX中设置属性mozlowerfullscreen或webkitallowlscreen

Question

iam尝试在这样的网页中包含vimeo iframe(JSX代码(：

<iframe frameBorder="0" width="100%" height="100%" src={this.props.src} webkitAllowFullScreen mozAllowFullScreen allowFullScreen />

渲染的是：

<iframe frameborder="0" width="100%" height="100%" src="https://player.vimeo.com/video/..." allowfullscreen=""></iframe>

如何实现所需的mozlowerfullscreen和webkitallowllscreen属性？在React Docs(https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes(中只是提到的允许fulllscreen属性？

Answer 1

尝试将true作为字符串传递。这对我有用(React 16(：

<iframe 
  frameBorder="0"
  width="100%" height="100%" 
  src={this.props.src}
  allowFullScreen="true"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
/>

更多详细信息：https：//github.com/facebook/react/issues/7848

Answer 2

类似的东西应该起作用：

<iframe frameborder="0" width="100%" height="100%"
    src={this.props.src} webkitAllowFullScreen={true}
    mozAllowFullScreen={true} allowFullScreen={true} />