Componentes de reAct del kit de herramientas de Microsoft GraphMicrosoft Graph Toolkit React components

  • Tiempo de lectura: 2 minutos

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.The Microsoft Graph Toolkit React components (mgt-react) allow React developers to use the Microsoft Graph Toolkit in their React applications. La biblioteca envuelve todos los componentes del kit de herramientas de Microsoft Graph y los exporta como componentes de reAct.The library wraps all Microsoft Graph Toolkit components and exports them as React components.

¿Qué componentes puedo usar?What components can I use?

La biblioteca se genera automáticamente a partir de los componentes Web de Microsoft Graph Toolkit y todos los componentes están disponibles como componentes de reAct.The library is autogenerated from the Microsoft Graph Toolkit web components and all components are available as React components.

Los nombres de los componentes de reAct están en PascalCase y no incluyen el Mgt prefijo.The names of the React components are in PascalCase and do not include the Mgt prefix. Por ejemplo, el mgt-person componente está disponible como Person , y el mgt-people-picker componente está disponible como PeoplePicker .For example, the mgt-person component is available as Person, and the mgt-people-picker component is available as PeoplePicker.

InstalaciónInstallation

Para instalar, use uno de los comandos siguientes.To install, use one of the following commands.

npm install @microsoft/mgt-react

oor

yarn add @microsoft/mgt-react

UsoUsage

Todos los componentes están disponibles a través del paquete NPM y se denominan con PascalCase.All components are available via the npm package and are named using PascalCase. Para usar un componente, primero impórtelo en la parte superior.To use a component, first import it at the top.

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

Ahora puede usar Person en cualquier lugar de su JSX como un componente de reAct normal.You can now use Person anywhere in your JSX as a regular React component.

<Person personQuery="me" />

Todas las propiedades y eventos se asignan exactamente tal y como se definen en la documentación del componente.All properties and events map exactly as they are defined in the component documentation.

Por ejemplo, puede establecer la personDetails propiedad en un objeto:For example, you can set the personDetails property to an object:

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

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

O bien registre un controlador de eventos:Or, register an event handler:

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

PlantillasTemplates

La mayoría de los componentes de Microsoft Graph Toolkit admiten la plantilla y mgt-react le permiten usar reAct para escribir plantillas.Most Microsoft Graph Toolkit components support templating and mgt-react allows you to use React to write templates.

Por ejemplo, para crear una plantilla que se usará para representar eventos en el mgt-agenda componente, defina primero un componente que se utilizará para representar un evento:For example, to create a template to be used for rendering events in the mgt-agenda component, first define a component to be used for rendering an event:

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

const MyEvent = (props: MgtTemplateProps) => {
  const { event } = props.dataContext;
  return <div>{event.subject}</div>;
};

A continuación, úselo como un elemento secundario del componente ajustado y establezca la plantilla prop a event .Then use it as a child of the wrapped component and set the template prop to event.

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

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

La template prop le permite especificar qué plantilla desea sobrescribir.The template prop allows you to specify which template to overwrite. En este caso, el MyEvent componente se repetirá para cada evento y el event objeto se pasará como parte de la dataContext prop.In this case, the MyEvent component will be repeated for every event, and the event object will be passed as part of the dataContext prop.

Vea tambiénSee also