时间戳

首页 > 解决方案 > 如何在我的 tab.js 上获取 teamId 和 userPrincipalName？

javascript - 如何在我的 tab.js 上获取 teamId 和 userPrincipalName？

问题描述

正如标题所述，我试图弄清楚如何在我的自定义团队应用程序的页面上获取我的 teamId 和 userPrincipleName。我遇到了很多不同的信息，但我是 Javascript 和 React 的完整初学者，所以我不知道如何正确应用它。

如何在团队应用程序的 tab.js 页面上显示 teamId 和 userPrincipleName？

我的代码：

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount(){
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
  }

  componentDidMount(){
    microsoftTeams.getContext((context) =>{
        let userId = document.getElementById('user');
        userId.innerHTML = context.userPrincipalName;
    });

  }

  render() {   
    return(
        <span id="user"></span>
        
    )
  }
}
export default Tab;

标签： javascriptreactjsmicrosoft-teamsmicrosoft-graph-teams

解决方案

你的第一个 componentDidMount 很好

  componentDidMount(){
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
  }

这是调用 api，然后将上下文响应保存在本地状态。

一个问题是你有 2 个 componentDidMount 函数，你应该只有 1 个，所以你可以删除第 2 个。在 react 中你可以使用 {variable} 渲染变量，你不需要手动设置 innerHTML。

您可以修改渲染函数以context在本地状态下使用该变量，如下所示

render() {
    // grab the values from state.context
    const { teamId, userPrincipleName } = this.state.context;
    
    return(
        <span id="user">Team: {teamId}, userPrincipleName: {userPrincipleName }</span>
        
    )
}

推荐阅读