typescript - spfx 開発用の typescript を使用して、dom 要素のリストを Web パーツのリストに追加するにはどうすればよいですか?

Question

だから私は、誰かが作成した ReactTour を使用して、 react-tour-pnpjs と呼ばれるカスタムspfx Web パーツに取り組んでいます。

コードでは、セクション、列、およびコントロールのリスト (これを webpart list と呼びます) を取得し、その配列を GetAllWebparts() 関数で使用します。Web パーツを構成すると、ページから Web パーツを選択できるため、ツアーを実行できます。以下は、Web パーツをスクレイピングするためのコードです。

 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 のパーツのリストにフィードしている Web パーツのリストにそれを追加する方法が完全にはわかりません。

PS: コーディングについては少し知っていますが、正式なトレーニングを受けていないため、これは非常に簡単かもしれませんが、手がかりがありません!