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-chatmgt-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 一部分传递。