带有钩子的React App中未调用Microsoft Graph工具包组件mgt-login事件 [英] Microsoft Graph toolkit component mgt-login event is not called in React App with hooks

问题描述

我已经从Microsoft Graph工具箱中实现了mgt-login组件，它工作正常，但是没有调用useEffect中我添加到mgt-login的事件. 此处有重复的问题-我确实关注了这个问题，但仍然没有添加该事件.这是该组件的代码

I have implemented mgt-login component from Microsoft Graph toolkit, it is working fine but it's not calling event I added to mgt-login within useEffect. Duplicate question here - I did follow this question but still its not calling event I added. Here is code for that component

import React, {
  useRef,
  useEffect,
} from 'react';


const Login = () => {
  const loginComponent = useRef(null);

  useEffect(() => {
    loginComponent.current.addEventListener('loginCompleted', () => console.log('Logged in!'));
  }, []);


  return (
    <div className="login">
      <mgt-login ref={loginComponent} />
    </div>
  );
};

这是在应用程序的主要index.jsx文件中实例化Provider的方式

Here is how instantiate Provider in main index.jsx file of app

import { Providers, MsalProvider } from '@microsoft/mgt';

Providers.globalProvider = new MsalProvider({
  clientId: process.env.REACT_APP_DEV_AZURE_APP_CLIENT_ID,
});

我不知道自己缺少什么，不确定是否对该组件进行了一些更新(顺便说一句，我在Microsoft图形文档中没有发现任何更改).

I don't know what I am missing, not sure if something was updated about this component(BTW, I have not found any change in microsoft graph docs).

谢谢！

推荐答案

为了使React中的mgt组件更容易使用，我们创建了一个React包装器，您可以在此处使用它，

To make the use of mgt components in React easier, we created a React wrapper that you can use here, mgt-react.

import React, {
  useRef,
  useEffect,
} from 'react';

import {Login} from '@microsoft/mgt-react';


const Login = () => {

  return (
    <div className="login">
      <Login loginCompleted={(e) => console.log('Logged in')} />
    </div>
  );
};

这篇关于带有钩子的React App中未调用Microsoft Graph工具包组件mgt-login事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！