Microsoft Graph Toolkit React 组件Microsoft Graph Toolkit React components

Microsoft Graph Toolkit React 组件 () React 开发人员可以使用 mgt-react Microsoft Graph Toolkit React 应用程序。The Microsoft Graph Toolkit React components (mgt-react) allow React developers to use the Microsoft Graph Toolkit in their React applications. 库包装所有 Microsoft Graph Toolkit组件,并导出为 React 组件。The library wraps all Microsoft Graph Toolkit components and exports them as React components.

我可以使用哪些组件?What components can I use?

库从 Microsoft Graph Toolkit Web 组件自动生成,并且所有组件都作为 React 组件提供。The library is autogenerated from the Microsoft Graph Toolkit web components and all components are available as React components.

React 组件的名称在 PascalCase 中,不包含 Mgt 前缀。The names of the React components are in PascalCase and do not include the Mgt prefix. 例如, mgt-person 组件可用为 ,组件 Person mgt-people-picker 可用为 PeoplePickerFor example, the mgt-person component is available as Person, and the mgt-people-picker component is available as PeoplePicker.

安装Installation

若要安装,请使用以下命令之一。To install, use one of the following commands.

npm install @microsoft/mgt-react

or

yarn add @microsoft/mgt-react

用法Usage

所有组件均通过 npm 包提供,并且使用 PascalCase 命名。All components are available via the npm package and are named using PascalCase. 若要使用组件,请首先将其导入顶部。To use a component, first import it at the top.

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

现在,你可以将 Person JSX 中的任何位置用作常规 React 组件。You can now use Person anywhere in your JSX as a regular React component.

<Person personQuery="me" />

所有属性和事件与组件文档中的定义完全一样。All properties and events map exactly as they are defined in the component documentation.

例如,可以将该属性 personDetails 设置为对象:For example, you can set the personDetails property to an object:

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

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

或者,注册事件处理程序: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>;
};

模板Templates

大多数 Microsoft Graph Toolkit组件 都支持模板 ,并允许你 mgt-react 使用 React 编写模板。Most Microsoft Graph Toolkit components support templating and mgt-react allows you to use React to write templates.

例如,若要创建用于呈现组件中的事件的模板,请首先定义用于呈现 mgt-agenda 事件的组件: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>;
};

然后,使用它作为封装组件的子项,然后将模板属性设置为 eventThen 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>
}

属性 template 允许你指定要覆盖的模板。The template prop allows you to specify which template to overwrite. 在这种情况下,将针对每个事件重复组件,并且对象作为属性的一 MyEvent event dataContext 部分传递。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.

另请参阅See also