Компоненты Microsoft Graph Toolkit в React

  • Статья

Компоненты Microsoft Graph Toolkit в React (mgt-react) позволяют разработчикам React использовать Microsoft Graph Toolkit в приложениях React. Библиотека упаковывает все компоненты Microsoft Graph Toolkit и экспортирует их как компоненты React. Мы также предоставляем другую библиотеку React (mgt-chat), чтобы включить сценарии чата, которые пока недоступны в качестве обычных веб-компонентов.

Какие компоненты можно использовать?

Библиотека mgt-react создается автоматически из веб-компонентов Microsoft Graph Toolkit, и все компоненты доступны как React компоненты.

Имена компонентов React находятся в PascalCase и не включают Mgt префикс. Например, компонент mgt-person доступен как Person, а mgt-people-picker — как PeoplePicker.

В дополнение к автоматически созданным 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 Toolkit поддерживают шаблоны, а 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 использует React useState перехватчик для отслеживания состояния входа в компоненте. React повторно отрисовывает компонент в ответ на любые изменения в этом состоянии. Он также использует useEffect перехватчик, который улучшает жизненный цикл компонента, отслеживая изменения в поставщике Microsoft Graph Toolkit и обновляя компонент по мере необходимости.

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

const [isSignedIn] = useIsSignedIn();

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

Связанные материалы