如何在 tsx 文件的渲染函数中从外部文件获取数据答案

【问题标题】：How to get data from external file in render function in tsx file如何在 tsx 文件的渲染函数中从外部文件获取数据
【发布时间】：2020-12-24 20:11:44
【问题描述】：

我正在使用 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',                                          
              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: '#',
            },
          ],
        },
      },          
    ];  
  }  
}

【问题讨论】：

标签： typescript sharepoint-online spfx fluent-ui

【解决方案1】：

@奥斯登佩雷拉，

请参考以下代码：

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",
      "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":"#"
            }
         ]
      }
   }
]

【讨论】：