为什么设置iframe的allowfullscreen属性似乎不保留属性

Question

在我的代码中，我设置了我的iframe的allowfullscreen属性，该属性被SkyLight包围，这是一个npm模块，用于react.js中的模态视图

            <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog">
              <iframe src=url frameborder="0" width="960" height="569" allowfullscreen="true"></iframe>;
            </SkyLight>

然而，当我检查页面时，我的iframe没有属性allowfullscreen：

但是，当我在控制台中手动添加属性allowfullscreen="true"时，iframe可以全屏显示。

有没有人知道如何确保allowfullscreen属性存在而无需通过控制台手动添加它？

Answer 1

请参阅the documentation。

React 区分大小写，该属性称为allowFullScreen，而不是allowfullscreen。它也是一个布尔属性，因此true不是它的有效值。

<iframe src="http://example.com" frameborder="0" width="960" height="569" allowFullScreen></iframe>

see a live demo

Answer 2

是的，当我手动添加body时，它可以正常工作。下面是我的代码示例-

var body: some View {
   VStack {
      // .. some content
   }
   .onAppear {
      userService.login { (didError, msg) in
         self.isLoading.toggle()
      }
   }
}