Componentes de React del kit de herramientas de Microsoft Graph

  • Artículo

Los componentes de React del kit de herramientas de Microsoft Graph (mgt-react) permiten a los desarrolladores de React usar el kit de herramientas de Microsoft Graph en sus aplicaciones de React. La biblioteca encapsula todos los componentes de Microsoft Graph Toolkit y los exporta como componentes React. También proporcionamos otra biblioteca de React (mgt-chat) para habilitar escenarios de chat que aún no están disponibles como componentes web normales.

¿Qué componentes puedo usar?

La mgt-react biblioteca se genera automáticamente a partir de los componentes web de Microsoft Graph Toolkit y todos los componentes están disponibles como componentes React.

Los nombres de los componentes de React están en PascalCase y no incluyen el Mgt prefijo . Por ejemplo, el mgt-person componente está disponible como Persony el mgt-people-picker componente está disponible como PeoplePicker.

Además de los componentes generados automáticamente, los mgt-chat componentes y mgt-new-chat se entregan como parte de un paquete independiente (mgt-chat).

Instalación

Para instalar, use el siguiente comando:

npm install @microsoft/mgt-react

Para agregar mgt-chat a la aplicación, use el siguiente comando:

npm install @microsoft/mgt-chat

Uso

Todos los componentes están disponibles a través de su paquete npm y se denominan mediante PascalCase. Para usar un componente, impórelo primero en la parte superior.

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

Si usa mgt-chat, importe los componentes por separado:

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

Ahora puede usar cualquiera de nuestros componentes en cualquier lugar de jsx como componente de React normal.

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

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

Todas las propiedades y eventos se asignan exactamente como se definen en la documentación del componente.

Por ejemplo, puede establecer la personDetails propiedad en un objeto :

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

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

O bien, registre un controlador de eventos:

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

Plantillas

La mayoría de los componentes del kit de herramientas de Microsoft Graph admiten plantillas y mgt-react le permiten usar React para escribir plantillas. Los componentes de chat (mgt-chat) no admiten plantillas personalizadas.

Por ejemplo, para crear una plantilla que se usará para representar eventos en el mgt-agenda componente, defina primero un componente que se usará para representar un evento:

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

A continuación, úselo como elemento secundario del componente encapsulado y establezca las propiedades de plantilla en event.

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

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

La template prop permite especificar qué plantilla se va a sobrescribir. En este caso, el MyEvent componente se repite para cada evento y el event objeto se pasa como parte de las dataContext propiedades.

Enlaces de React personalizados

mgt-reactproporciona enlaces de React personalizados que puede usar en la aplicación para realizar un seguimiento del estado de la aplicación.

useIsSignedIn

El useIsSignedIn enlace usa el enlace de React useState para realizar un seguimiento del estado de la sesión iniciada en el componente. React vuelve a representar el componente en respuesta a los cambios en este estado. También usa el useEffect enlace que mejora el ciclo de vida del componente mediante la supervisión de los cambios en el proveedor de Microsoft Graph Toolkit y la actualización del componente según sea necesario.

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

const [isSignedIn] = useIsSignedIn();

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

Contenido relacionado