typescript - 如何使用 typescript 将 dom 元素列表添加到 webpart 列表中以进行 spfx 开发？

Question

因此，我正在使用有人创建的名为react-tour-pnpjs 的 ReactTour开发自定义 spfx webpart 。

在代码中，它获取部分、列和控件的列表（称为 webpart 列表），然后在 GetAllWebparts() 函数中使用该数组。当您配置 web 部件时，您可以从页面中选择 web 部件，以便您进行游览。下面是抓取webparts的代码。

 public async GetAllWebpart(): Promise<any[]> {
// page file
const file = sp.web.getFileByServerRelativePath(this.context.pageContext.site.serverRequestPath);

const page = await ClientSidePage.fromFile(file);

const wpData: any[] = [];

page.sections.forEach(section => {
  section.columns.forEach(column => {
    column.controls.forEach(control => {
      var wpName = {}
      var wp = {};
      if (control.data.webPartData != undefined) {
        wpName = `sec[${section.order}] col[${column.order}] - ${control.data.webPartData.title}`;
        wp = { text: wpName, key: control.data.webPartData.instanceId };
        wpData.push(wp);
      } else {
        wpName = `sec[${section.order}] col[${column.order}] - "Webpart"`;
        wp = { text: wpName, key: control.data.id };
      }
      wpData.push(wp);
    });
  });
});
return wpData;

然而，我的客户希望在游览中包含导航栏，所以我知道我需要使用类似这样的东西来获取导航栏元素：

const nav = document.getElementById("nav");

但我不完全确定如何将其添加到 GetAllWebparts() 函数正在向 PropertyPaneConfiguration 中的部件列表提供的 webpart 列表中，非常感谢任何帮助！

PS：我对编码有点了解，但我没有受过任何正规培训，所以这可能很简单，但我不知道！

标签： typescriptsharepoint-onlinespfxpnp-js