Komponenten des Microsoft Graph-Toolkits React
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 Person
verfügbar, und die mgt-people-picker
-Komponente ist als PeoplePicker
verfü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-react
stellt 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> }
}