Compartilhar via

Componentes de React do Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

Os componentes React do Microsoft Graph Toolkit (mgt-react) permitem que React programadores utilizem o Microsoft Graph Toolkit nas suas aplicações React. A biblioteca encapsula todos os componentes do Microsoft Graph Toolkit e exporta-os como componentes React. Também fornecemos outra biblioteca de React (mgt-chat) para ativar cenários de chat que ainda não estão disponíveis como componentes Web normais.

Que componentes posso utilizar?

A mgt-react biblioteca é gerada automaticamente a partir dos componentes Web do Microsoft Graph Toolkit e todos os componentes estão disponíveis como componentes React.

Os nomes dos componentes React estão em PascalCase e não incluem o Mgt prefixo. Por exemplo, o mgt-person componente está disponível como Persone o mgt-people-picker componente está disponível como PeoplePicker.

Além dos componentes gerados automaticamente, os mgt-chat componentes e mgt-new-chat são entregues como parte de um pacote separado (mgt-chat).

Instalação

Para instalar, utilize o seguinte comando:

npm install @microsoft/mgt-react

Para adicionar mgt-chat à sua aplicação, utilize o seguinte comando:

npm install @microsoft/mgt-chat

Uso

Todos os componentes estão disponíveis através do respetivo pacote npm e têm o nome PascalCase. Para utilizar um componente, importe-o primeiro na parte superior.

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

Se estiver a utilizar mgt-chat, importe os componentes separadamente:

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

Agora, pode utilizar qualquer um dos nossos componentes em qualquer parte do JSX como um componente de React normal.

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

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

Todas as propriedades e eventos mapeiam exatamente como estão definidos na documentação do componente.

Por exemplo, pode definir a personDetails propriedade para um objeto:

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

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

Em alternativa, registe um processador 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>;
};

Modelos

A maioria dos componentes do Microsoft Graph Toolkit suporta a modelação e mgt-react permite-lhe utilizar React para escrever modelos. Os componentes de chat (mgt-chat) não suportam modelos personalizados.

Por exemplo, para criar um modelo a ser utilizado para compor eventos no mgt-agenda componente, primeiro defina um componente a ser utilizado para compor um 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>
  );
};

Em seguida, utilize-o como elemento subordinado do componente moldado e defina as propriedades do modelo como event.

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

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

O template adereço permite-lhe especificar o modelo a substituir. Neste caso, o MyEvent componente é repetido para cada evento e o event objeto é transmitido como parte das dataContext propriedades.

Hooks de React personalizados

mgt-reactfornece hooks de React personalizados que pode utilizar na sua aplicação para controlar o estado da sua aplicação.

useIsSignedIn

O useIsSignedIn hook utiliza o gancho de React useState para controlar o estado de início de sessão no componente. React compõe novamente o componente em resposta a quaisquer alterações neste estado. Também utiliza o useEffect hook que melhora o ciclo de vida do componente ao monitorizar as alterações no fornecedor do Microsoft Graph Toolkit e atualizar o componente conforme necessário.

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

const [isSignedIn] = useIsSignedIn();

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

Conteúdo relacionado

  • Last updated on