如何在SPFx-React组件中调用SharePoint添加新WebPart的功能？

一、页面的新增、编辑与删除操作（基于PnP.js） #

1. 删除页面 #

通过PnP.js直接调用页面删除接口：

import { sp } from "@pnp/sp";

const deletePage = async (pageId: number) => {
  try {
    await sp.web.pages.getById(pageId).delete();
    // 此处可更新页面列表状态或提示用户操作结果
  } catch (error) {
    console.error("页面删除失败:", error);
  }
};

2. 新增页面 #

创建现代站点页面，指定页面名称即可：

const createPage = async (pageName: string) => {
  try {
    // 第二个参数为true表示创建现代页面
    const newPage = await sp.web.pages.add(pageName, true);
    // 可跳转至编辑页或更新本地页面列表数据
  } catch (error) {
    console.error("页面创建失败:", error);
  }
};

3. 编辑页面内容 #

修改页面标题或其他属性，直接调用更新接口：

const updatePageTitle = async (pageId: number, newTitle: string) => {
  try {
    await sp.web.pages.getById(pageId).update({
      Title: newTitle
    });
    // 更新本地状态同步变更
  } catch (error) {
    console.error("页面标题更新失败:", error);
  }
};

二、集成添加WebPart到页面的功能 #

1. 触发原生WebPart选择面板（匹配你提供的交互样式） #

利用PnP.js的ClientSidePage实例，触发SharePoint内置的WebPart选择面板：

import { sp } from "@pnp/sp";
import { ClientSidePage } from "@pnp/sp/clientside-pages";

const openWebPartPicker = async (pageId: number) => {
  try {
    // 获取目标页面的ClientSidePage实例
    const page = await ClientSidePage.fromSP(sp.web.pages.getById(pageId));
    
    // 若页面未处于编辑状态，先进入编辑模式
    if (!page.isEditMode) {
      await page.edit();
    }
    
    // 打开WebPart选择面板，指定添加到页面第一个区块的第一列
    await page.addWebPartFromPicker(page.sections[0].columns[0]);
    
    // 保存页面变更
    await page.save();
  } catch (error) {
    console.error("打开WebPart选择面板失败:", error);
  }
};

2. 直接通过API添加指定WebPart #

如果已知目标WebPart的ID和配置，可跳过面板直接添加：

const addSpecificWebPart = async (pageId: number) => {
  try {
    const page = await ClientSidePage.fromSP(sp.web.pages.getById(pageId));
    
    if (!page.isEditMode) {
      await page.edit();
    }
    
    // 示例：添加内置文本编辑器WebPart，参数依次为WebPart ID、目标列、配置属性
    const addedWP = await page.addWebPart("{1ef78a22-776d-48f2-9c5c-16f78b32e471}", page.sections[0].columns[0], {
      title: "新增文本WebPart",
      description: "通过API直接添加"
    });
    
    await page.save();
  } catch (error) {
    console.error("WebPart添加失败:", error);
  }
};

注意事项 #

• 确保SPFx WebPart已配置足够权限，在package-solution.json中按需添加ManageWeb或FullControl权限请求
• 操作页面时需处理编辑/保存状态，避免并发冲突
• 确认使用的PnP.js版本为最新稳定版，避免API兼容性问题

内容的提问来源于stack exchange，提问作者Sol