如何在tsx文件的渲染功能中从外部文件获取数据

问题描述

我正在使用Visual Studio代码并为React和Typesctipt开发SharePoint Online的ApplicationCustomizer SPFX扩展。我正在尝试在标题部分中生成命令栏结构ui组件，以呈现结构ui下拉菜单。根据网上提供的入门示例，我设法使它正常工作。

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

import * as React from "react";  
import { Link } from 'office-ui-fabric-react/lib/Link';  
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';  
import { SPHttpClient,SPHttpClientResponse,SPHttpClientConfiguration } from '@microsoft/sp-http'; 
  
export interface IReactHeaderProps {  }  
  
export default class ReactHeader extends React.Component<IReactHeaderProps> {  
  constructor(props: IReactHeaderProps) {  
    super(props);  
  }  
  
  public render(): JSX.Element {  
    
    return (  
      <div className={"ms-bgColor-themeDark ms-fontColor-white"}>  
       <CommandBar  items={this.getItems()}  />   
      </div>  
    );  
  }  
  
  // Data for CommandBar  
  private getItems = () => {      
    return [  
      **

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

解决方法

@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
      });
    });
  } 
}

IExternalfileState.ts：

export interface IExternalfileState {
  Items: [];
}

Json文件：

[
   {
      "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","subMenuProps":{
         "items":[
            {
               "key":"submenu3.1","subMenuProps":{
                  "items":[
                     {
                        "key":"submenu3.2","name":"Option 1.1","href":"#"
                     },{
                        "key":"submenu4.2","name":"Option 1.2","href":"#"
                     }
                  ]
               }
            },{
               "key":"submenu4","href":"#"
            }
         ]
      }
   }
]

BR