如何使用带有闪电的visualforce页面：闪电应用程序构建器中的容器反应？答案

【问题标题】：How to use visualforce page with lightning:container React in Lightning app builder?如何使用带有闪电的visualforce页面：闪电应用程序构建器中的容器反应？
【发布时间】：2020-11-24 14:29:12
【问题描述】：

我尝试通过闪电在 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>

我的第一个应用程序

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

有办法解决吗？我找不到直接加载 aura:application 的方法，所以如果有方法请告诉我。

【问题讨论】：

仅供参考，以后请使用 salesforce.stackexchange 直接与 SF 相关的问题

标签： reactjs salesforce visualforce salesforce-lightning

【解决方案1】：

您遇到了一些初始问题...您只需将 React 应用程序直接安装在 VF 页面内。无需使用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，但不推荐。

【讨论】：