Komponenten des Microsoft Graph-Toolkits React

  • Artikel

Das Microsoft Graph-Toolkit React-Komponenten (mgt-react) ermöglichen es React Entwicklern, das Microsoft Graph-Toolkit in ihren React Anwendungen zu verwenden. Die Bibliothek umschließt alle Komponenten des Microsoft Graph-Toolkits und exportiert sie als React Komponenten. Wir stellen auch eine weitere React-Bibliothek (mgt-chat) bereit, um Chatszenarien zu ermöglichen, die noch nicht als reguläre Webkomponenten verfügbar sind.

Welche Komponenten kann ich verwenden?

Die mgt-react Bibliothek wird automatisch aus den Webkomponenten des Microsoft Graph-Toolkits generiert, und alle Komponenten sind als React-Komponenten verfügbar.

Die Namen der React Komponenten befinden sich in PascalCase und enthalten nicht das Mgt Präfix. Beispielsweise ist die mgt-person -Komponente als Personverfügbar, und die mgt-people-picker -Komponente ist als PeoplePickerverfügbar.

Zusätzlich zu den automatisch generierten Komponenten werden die mgt-chat Komponenten und mgt-new-chat als Teil eines separaten Pakets (mgt-chat) bereitgestellt.

Installation

Verwenden Sie zum Installieren den folgenden Befehl:

npm install @microsoft/mgt-react

Verwenden Sie den folgenden Befehl, um Ihrer Anwendung hinzuzufügen mgt-chat :

npm install @microsoft/mgt-chat

Verwendung

Alle Komponenten sind über ihr npm-Paket verfügbar und werden mit PascalCase benannt. Um eine Komponente zu verwenden, importieren Sie sie zuerst oben.

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

Wenn Sie verwenden mgt-chat, importieren Sie die Komponenten separat:

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

Sie können jetzt jede unserer Komponenten überall in Ihrem JSX als reguläre React-Komponente verwenden.

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

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

Alle Eigenschaften und Ereignisse sind genau so zugeordnet, wie sie in der Komponentendokumentation definiert sind.

Beispielsweise können Sie die personDetails -Eigenschaft auf ein -Objekt festlegen:

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

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

Oder registrieren Sie einen Ereignishandler:

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>;
};

Vorlagen

Die meisten Komponenten des Microsoft Graph-Toolkits unterstützen Vorlagen und mgt-react ermöglichen es Ihnen, React zum Schreiben von Vorlagen zu verwenden. Die Chatkomponenten (mgt-chat) unterstützen keine benutzerdefinierten Vorlagen.

Um beispielsweise eine Vorlage zu erstellen, die zum Rendern von Ereignissen in der mgt-agenda Komponente verwendet werden soll, definieren Sie zunächst eine Komponente, die zum Rendern eines Ereignisses verwendet werden soll:

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>
  );
};

Verwenden Sie sie dann als untergeordnetes Element der umschlossenen Komponente, und legen Sie die Vorlageneigenschaften auf fest event.

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

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

Mit template dem Prop können Sie angeben, welche Vorlage überschrieben werden soll. In diesem Fall wird die MyEvent Komponente für jedes Ereignis wiederholt, und das event Objekt wird als Teil der dataContext Eigenschaften übergeben.

Benutzerdefinierte React Hooks

mgt-reactstellt benutzerdefinierte React Hooks bereit, die Sie in Ihrer Anwendung verwenden können, um den Status Ihrer Anwendung nachzuverfolgen.

useIsSignedIn

Der useIsSignedIn Hook verwendet den React-HookuseState, um den Anmeldestatus in Ihrer Komponente nachzuverfolgen. React ihre Komponente als Reaktion auf Änderungen in diesem Zustand neu rendert. Außerdem wird der useEffect Hook verwendet, der den Lebenszyklus der Komponente verbessert, indem Änderungen im Microsoft Graph-Toolkit-Anbieter überwacht und die Komponente bei Bedarf aktualisiert wird.

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

const [isSignedIn] = useIsSignedIn();

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

Verwandte Inhalte