Composants Graph Shared Computer Toolkit React Microsoft

Les composants microsoft Graph Shared Computer Toolkit React (mgt-react) permettent aux développeurs React d’utiliser l’Graph Shared Computer Toolkit Microsoft dans leurs applications React applications. La bibliothèque encapsule tous les Graph Shared Computer Toolkit Microsoft et les exporte en tant React composants.

Quels composants puis-je utiliser ?

La bibliothèque est automatiquementgentée à partir des composants web Graph Shared Computer Toolkit Microsoft et tous les composants sont disponibles sous la React composants.

Les noms des composants React sont dans LeCase et n’incluent pas le Mgt préfixe. Par exemple, le mgt-person composant est disponible en tant Personque , 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, importez-le d’abord en haut.

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

Vous pouvez désormais utiliser n’importe Person où dans votre JSX en tant que composant React ordinaire.

<Person personQuery="me" />

Toutes les propriétés et événements sont map faits exactement comme ils sont définis dans la documentation des composants.

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

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

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

Vous aussi, inscrivez un handler 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 Graph Shared Computer Toolkit microsoft permettent la conception de modèles mgt-react et vous permettent d’utiliser React pour écrire des modèles.

Par exemple, pour créer un modèle mgt-agenda à utiliser pour le rendu des événements dans le 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 en tant qu’enfant du composant wrapped et définissez la prop du modèle sur event.

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

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

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

Voir aussi