通过

Microsoft Graph 工具包React组件

  • 项目

Microsoft Graph 工具包React组件 (mgt-react) 允许React开发人员在其React应用程序中使用 Microsoft Graph 工具包。 该库包装所有 Microsoft Graph 工具包组件，并将其导出为React组件。 我们还提供了另一个React库 (mgt-chat) ，以启用尚不作为常规 Web 组件提供的聊天方案。

可以使用哪些组件？

库mgt-react是从 Microsoft Graph 工具包 Web 组件自动生成的，所有组件都作为React组件提供。

React组件的名称位于 PascalCase 中，不包含Mgt前缀。 例如，组件mgt-person作为 提供，mgt-people-picker而组件作为 PeoplePickerPerson提供。

除了自动生成的组件外， mgt-chat 和 mgt-new-chat 组件还作为单独的包的一部分交付， mgt-chat () 。

安装

若要安装，请使用以下命令：

npm install @microsoft/mgt-react

若要添加到 mgt-chat 应用程序，请使用以下命令：

npm install @microsoft/mgt-chat

用法

所有组件都通过其 npm 包提供，并使用 PascalCase 命名。 若要使用组件，请先将其导入顶部。

import { Person } from "@microsoft/mgt-react";

如果使用 mgt-chat，请单独导入组件：

import { Chat } from "@microsoft/mgt-chat";

现在，可以在 JSX 中的任意位置使用我们的任何组件作为常规React组件。

// Using the Person component
<Person personQuery="me" />

// Using the Chat component
<Chat chatId="19:25fdc88d202440b78e9229773cbb1713@thread.v2" />

所有属性和事件都完全按照组件文档中的定义进行映射。

例如，可以将 属性 personDetails 设置为 对象：

const App = (props) => {
  const personDetails = {
    displayName: "Bill Gates",
  };

  return <Person personDetails={personDetails}></Person>;
};

或者，注册事件处理程序：

import { PeoplePicker, People } from "@microsoft/mgt-react";

const App = (props) => {
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e) => {
    setPeople(e.target.selectedPeople);
  };

  return;
  <div>
    <PeoplePicker selectionChanged={handleSelectionChanged} />
    Selected People: <People people={people} />
  </div>;
};

模板

大多数 Microsoft Graph 工具包组件都支持模板化，mgt-react并允许使用React来编写模板。 聊天组件 (mgt-chat) 不支持自定义模板化。

例如，若要创建用于呈现组件中的 mgt-agenda 事件的模板，请首先定义一个用于呈现事件的组件：

import { MgtTemplateProps } from "@microsoft/mgt-react";

const MyEvent = (props: MgtTemplateProps) => {
  const { event } = props.dataContext;
  return (
    <div>
      {event.subject}
      <br />
      {event.attendees
        .map((attendee: any) => attendee.emailAddress.name)
        .join(", ")}
    </div>
  );
};

然后将其用作包装组件的子级，并将模板属性设置为 event。

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

const App = (props) => {
  return <Agenda>
    <MyEvent template="event">
  </Agenda>
}

属性 template 允许指定要覆盖的模板。 在这种情况下， MyEvent 组件将针对每个事件重复，并且对象 event 作为属性的 dataContext 一部分传递。

自定义React挂钩

mgt-react提供可在应用程序中用于跟踪应用程序状态的自定义React挂钩。

useIsSignedIn

挂钩useIsSignedIn使用ReactuseState挂钩跟踪组件中的登录状态。 React会重新呈现组件，以响应此状态中的任何更改。 它还使用挂钩， useEffect 它通过监视 Microsoft Graph 工具包提供程序中的更改并根据需要更新组件来增强组件的生命周期。

import { useIsSignedIn, Agenda } from '@microsoft/mgt-react';

const [isSignedIn] = useIsSignedIn();

const App = (props) => {
  return { isSignedIn && <Agenda></Agenda> }
}

相关内容