在新标签/窗口中打开VF页面

Question

我是Salesforce Lightning的新手，并尝试将在新弹出窗口中打开VF页面的经典按钮（“详细信息页面”按钮）转换为Lightning组件。下面是我尝试过的方法，在Lightning中创建了一个New Action，并将其链接到下面的lightning组件

selectCampignContainer.cmp（iframe在新窗口中打开VF页面）

<aura:component implements="force:lightningQuickAction" access="global">
    <aura:attribute name='vfpName' type='String'/>
<iframe src="https://abc.lightning.force.com/apex/ +v.vfpName" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

selectCampignContainerController.cmp

({
    handleClick : function (cmp, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
           componentDef : "c:selectCampignContainer",
           componentAttributes: {
              vfpName : 'Campaign_Selection_Page'
           }
        });
        evt.fire();
    }
});

VF页面就像

<apex:page standardController="Opportunity" extensions="Campaign_Selection_Page_Ext" id="page" showHeader="false" sidebar="false" lightningStylesheets="true" >
    <apex:form id="form">

        <apex:pageBlock title="Campaign Attribution" id="pageBlock">
            <apex:pageblockSection >
               <apex:outputField value="{!currentRecord.CampaignId}" label="Primary Campaign"/>
            </apex:pageblockSection>
            <apex:pageBlockSection title="Search Criteria" collapsible="false">
                <apex:inputText value="{!campaignRecord.Name}"/>               
                <apex:inputField value="{!campaignRecord.StartDate}"/>
                <!--<apex:inputField value="{!campaignRecord.Type}"/>-->
                <apex:selectList value="{!campaignRecord.Type}" multiselect="false" size="1">
                    <apex:selectOptions value="{!campaignType}" ></apex:selectOptions>
                </apex:selectList>
                <apex:inputField value="{!campaignRecord.EndDate}"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection columns="1">
                <apex:outputPanel style="float:right;">
                <apex:commandButton value="Search" action="{!search}"  rerender="form"/> &nbsp;<apex:commandButton value="Assign Campaign" action="{!assign}" rerender="form"/>
                </apex:outputPanel>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Search Results"></apex:pageBlockSection>
            <apex:pagemessages ></apex:pagemessages>
            <apex:pageBlockTable value="{!campaignRecords}" var="rec" id="pbTable">
                <apex:column id="pbColumn" >
                    <apex:inputCheckbox value="{!rec.bol}">
                        <apex:actionSupport event="onchange" action="{!selectUnselect}" reRender="pbTable">
                            <apex:param value="{!rec.Campaig.Id}" assignTo="{!selectedCampaign}" name="recId"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                </apex:column>
                <apex:column value="{!rec.Campaig.Name}"/>
                <apex:column value="{!rec.Campaig.Campaign_Short_Name__c }"/>
                <apex:column value="{!rec.Campaig.Type}"/>
                <apex:column value="{!rec.Campaig.StartDate}"/>
                <apex:column value="{!rec.Campaig.EndDate}"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

但是当我单击闪电中的按钮时，出现类似

此VF页面在Classic中可完美运行，我刚刚添加了lightningStylesheets =“ true”。谁能让我知道我在这里想念什么