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

Question

如标题所述，我试图弄清楚如何在我的自定义团队应用程序中的页面上获取我的 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;

Answer 1

你的第一个 componentDidMount 没问题

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

这是调用 api，然后将 context response 保存在本地状态。

问题是你有 2 个 componentDidMount 函数，你应该只有 1 个，所以你可以删除第二个。在 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>
        
    )
}

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

How to get the teamId and userPrincipalName on my tab.js?

javascript

reactjs

microsoft-teams

microsoft-graph-teams