找不到名称'SP'.ts（2304）

Question

我正在使用以下功能在共享点的“模型”弹出窗口中显示URL。

database.history=io.debezium.relational.history.MemoryDatabaseHistory

function openDialog(pageUrl) { 
          SP.UI.ModalDialog.showModalDialog( 
            { 
              url: pageUrl, 
              width: 700, 
              height: 700, 
              title: "Office Holidays" 
            } 
          ); 
    }

但是当我使用react在SPFX中使用相同的功能时，这给我SP名称空间一个错误。

我需要安装或导入任何东西吗？

Answer 1

示例演示：

import { SPComponentLoader } from '@microsoft/sp-loader';
declare var SP:any;

加载必要的js和CSS

SPComponentLoader.loadCss('/_layouts/15/1033/styles/corev15.css');  

    SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.init.js', {
        globalExportsName: 'SP'
      });
    })        
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.ui.dialog.js', {
        globalExportsName: 'SP'
      });
    });

绑定事件。

this.domElement.innerHTML = `
      <div class="${ styles.fixWebpart }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>            
              <input id="myButton" type="button" value="Click me" />                                  
            </div>
          </div>
        </div>
      </div>`

    this.domElement.querySelector('#myButton').addEventListener('click', () => { this.MyNotify(); });

事件

public MyNotify():void{      

  SP.UI.ModalDialog.showModalDialog( 
    { 
      url: '/sites/lee/Lists/ListB/AllItems.aspx', 
      width: 700, 
      height: 700, 
      title: "Office Holidays" 
    } 
  );
  }