因此,我正在使用有人创建的名为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:我对编码有点了解,但我没有受过任何正规培训,所以这可能很简单,但我不知道!