如何在Lightning app builder中使用visualforce页面和lightning:container React？

Question

我尝试通过lightning在visualforce页面中创建一个React应用程序。当我在visualforce设置中点击预览时，一切都很好。

​

​

但当我在Lightning应用程序构建器中使用它时，它不起作用。它显示了

​

错误：Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mirage-video-dev-ed--c.visualforce.com".真的很奇怪，如果我右击并选择“重新加载帧”，它就能工作。

​

​

Visualforce代码

<apex:page >
    <apex:includeLightning />
    <div id="hello" />
    <script>
        $Lightning.use("c:myFirstApp", function() {
            $Lightning.createComponent("lightning:container",
              { src: "{!$Resource.hello + '/index.html'}"},
              "hello",
              function(cmp) {
                console.log("created");
                // do some stuff
              }
          );

        });
    </script>
</apex:page>

myFirstApp

<aura:application access="global" extends="ltng:outApp">
    <aura:dependency resource="lightning:container"/>
</aura:application>

有没有办法解决这个问题？我找不到直接加载aura:应用程序的方法，所以如果有方法，请告诉我。

Answer 1

你有一个小小的初始问题...您只需在VF页面中直接挂载react应用程序即可。不需要使用lightning:container。

请参阅我的B.A.S.S.项目。事实证明，这是可行的，并且具有极高的可扩展性。

使用react应用程序的示例VF页面：

<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0">
    <script type="text/javascript">
        //rest details
        const __ACCESSTOKEN__ = '{!$Api.Session_ID}';
        const __RESTHOST__ = '';
    </script>
    <div id="root"></div>
    <!-- Your react entry point -->
    <script type='text/javascript' src="{!URLFOR($Resource.app, 'dist/app.js')}"></script>
</apex:page>

也可以运行React App directly inside a LWC，但不推荐这样做。