Typescript 如何在tsx文件的render函数中从外部文件获取数据

我正在使用visual studio代码、react和TypesCitip为SharePoint Online开发ApplicationCustomizer SPFX扩展。我试图在标题部分生成commandbar fabric ui组件，以呈现fabric ui下拉菜单。我已经设法让这项工作根据入门样品在线提供

我需要从存储在SharePoint上SiteAssets文件夹中的外部文本文件中读取所需菜单项格式的菜单项字符串。请有人指导我如何正确更新getItems（）函数中的代码以从外部文件返回文本，下面是我的tsx代码文件：

import*as React from“React”；
从“officeui/lib/Link”导入{Link}；
从“officeui/lib/CommandBar”导入{CommandBar}；
从“@microsoft/sp http”导入{SPHttpClient，SPHttpClientResponse，SPHttpClientConfiguration}；
导出接口IReactHeaderProps{}
导出默认类ReactHeader扩展React.Component{
构造函数（props:IReactHeaderProps）{
超级（道具）；
}  
public render（）：JSX.Element{
报税表（
);  
}  
//CommandBar的数据
私有getItems=（）=>{
返回[
**
{  
键：“菜单1”，
名称：“主菜单1”，
cacheKey:“myCacheKey”，
iconProps:{iconName:'ChevronDown'}，
href:“#”，
子菜单：{
项目：[
{
键：“子菜单1”，
名称：“选项1”，
href:“#”，
},
{
键：“子菜单2”，
名称：“选项2”，
href:“#”，
},
],
},
},  
{
键：“menu2”，
名称：'主菜单2'，
cacheKey:“myCacheKey”，
iconProps:{iconName:'ChevronDown'}，
href:“#”，
子菜单：{
项目：[
{
键：“子菜单3.1”，
名称：“选项1”，
href:“#”，
子菜单：{
项目：[
{
键：“子菜单3.2”，
名称：“选项1.1”，
href:“#”，
},
{
键：“子菜单4.2”，
名称：“选项1.2”，
href:“#”，
},
],
},
},
{
键：“子菜单4”，
名称：“选项2”，
href:“#”，
},
],
},
},          
];  
}  
}

@Osden Pereira

请参考以下代码：

import * as React from 'react';
import styles from './Externalfile.module.scss';
import { IExternalfileProps } from './IExternalfileProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IExternalfileState } from './IExternalfileState';

export default class Externalfile extends React.Component<IExternalfileProps, IExternalfileState> {

  constructor(props: IExternalfileProps) {
    super(props);
    this.state = {
      Items: []
    };
  }

  public render(): React.ReactElement<IExternalfileProps> {
    return (
      <div className={styles.externalfile}>
        <div className={"ms-bgColor-themeDark ms-fontColor-white"}>
          <CommandBar items={this.state.Items} />
        </div>
      </div>
    );
  }

  public componentDidMount() {
    this.getItems01();
  }

  // Data for CommandBar
  private getItems01() { 
    let url = this.props.ctx.pageContext.site.serverRelativeUrl + "/SiteAssets/testjson.txt";
    this.props.ctx.spHttpClient.get(url, SPHttpClient.configurations.v1).then(res => {
      return res.json();
    }).then(e => {
      this.setState({
        Items: e
      });
    });
  } 
}

Json文件：

溴

export interface IExternalfileState {
  Items: [];
}

[
   {
      "key":"menu1",
      "name":"Main Menu 1",
      "cacheKey":"myCacheKey",
      "iconProps":{
         "iconName":"ChevronDown"
      },
      "href":"#",
      "subMenuProps":{
         "items":[
            {
               "key":"submenu1",
               "name":"Option 1",
               "href":"#"
            },
            {
               "key":"submenu2",
               "name":"Option 2",
               "href":"#"
            }
         ]
      }
   },
   {
      "key":"menu2",
      "name":"Main Menu 2",
      "cacheKey":"myCacheKey",
      "iconProps":{
         "iconName":"ChevronDown"
      },
      "href":"#",
      "subMenuProps":{
         "items":[
            {
               "key":"submenu3.1",
               "name":"Option 1",
               "href":"#",
               "subMenuProps":{
                  "items":[
                     {
                        "key":"submenu3.2",
                        "name":"Option 1.1",
                        "href":"#"
                     },
                     {
                        "key":"submenu4.2",
                        "name":"Option 1.2",
                        "href":"#"
                     }
                  ]
               }
            },
            {
               "key":"submenu4",
               "name":"Option 2",
               "href":"#"
            }
         ]
      }
   }
]