Composants du Kit de ressources Microsoft Graph React

  • Article

Les composants du Kit de ressources Microsoft Graph React () permettentmgt-react aux développeurs React d’utiliser le Kit de ressources Microsoft Graph dans leurs applications React. La bibliothèque encapsule tous les composants du Kit de ressources Microsoft Graph et les exporte en tant que composants React.

Quels composants puis-je utiliser ?

La bibliothèque est générée automatiquement à partir des composants web du Kit de ressources Microsoft Graph et tous les composants sont disponibles en tant que composants React.

Les noms des composants React sont en PascalCase et n’incluent pas le Mgt préfixe . Par exemple, le mgt-person composant est disponible en tant que Person, et le mgt-people-picker composant est disponible en tant que PeoplePicker.

Installation

Pour installer, utilisez l’une des commandes suivantes.

npm install @microsoft/mgt-react

ou

yarn add @microsoft/mgt-react

Utilisation

Tous les composants sont disponibles via le package npm et sont nommés à l’aide de PascalCase. Pour utiliser un composant, commencez par l’importer en haut.

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

Vous pouvez désormais utiliser Person n’importe où dans votre JSX comme composant React standard.

<Person personQuery="me" />

Toutes les propriétés et tous les événements sont mappés exactement comme ils sont définis dans la documentation du composant.

Par exemple, vous pouvez définir la propriété sur personDetails un objet :

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

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

Vous pouvez également inscrire un gestionnaire d’événements :

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

Modèles

La plupart des composants du Kit de ressources Microsoft Graph prennent en charge la création de modèles et mgt-react vous permettent d’utiliser React pour écrire des modèles.

Par exemple, pour créer un modèle à utiliser pour le rendu des événements dans le mgt-agenda composant, définissez d’abord un composant à utiliser pour le rendu d’un événement :

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

Ensuite, utilisez-le comme enfant du composant encapsulé et définissez la propriété de modèle sur event.

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

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

La template propriété vous permet de spécifier le modèle à remplacer. Dans ce cas, le MyEvent composant est répété pour chaque événement et l’objet event est passé dans le cadre de la dataContext propriété.

Voir aussi