Microsoft Graph 工具包React组件
Microsoft Graph 工具包React组件 (mgt-react
) 允许React开发人员在其React应用程序中使用 Microsoft Graph 工具包。 该库包装所有 Microsoft Graph 工具包组件,并将其导出为React组件。 我们还提供了另一个React库 (mgt-chat
) ,以启用尚不作为常规 Web 组件提供的聊天方案。
可以使用哪些组件?
库mgt-react
是从 Microsoft Graph 工具包 Web 组件自动生成的,所有组件都作为React组件提供。
React组件的名称位于 PascalCase 中,不包含Mgt
前缀。 例如,组件mgt-person
作为 提供,mgt-people-picker
而组件作为 PeoplePicker
Person
提供。
除了自动生成的组件外, mgt-chat
和 mgt-new-chat
组件还作为单独的包的一部分交付, mgt-chat
() 。
安装
若要安装,请使用以下命令:
npm install @microsoft/mgt-react
若要添加到 mgt-chat
应用程序,请使用以下命令:
npm install @microsoft/mgt-chat
用法
所有组件都通过其 npm 包提供,并使用 PascalCase 命名。 若要使用组件,请先将其导入顶部。
import { Person } from '@microsoft/mgt-react';
如果使用 mgt-chat
,请单独导入组件:
import { Chat } from '@microsoft/mgt-chat';
现在,可以在 JSX 中的任意位置使用我们的任何组件作为常规React组件。
// Using the Person component
<Person personQuery="me" />
// Using the Chat component
<Chat chatId="19:25fdc88d202440b78e9229773cbb1713@thread.v2" />
所有属性和事件都完全按照组件文档中的定义进行映射。
例如,可以将 属性 personDetails
设置为 对象:
const App = (props) => {
const personDetails = {
displayName: 'Bill Gates',
};
return <Person personDetails={personDetails}></Person>;
};
或者,注册事件处理程序:
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>;
};
模板
大多数 Microsoft Graph 工具包组件都支持模板化,mgt-react
并允许使用React来编写模板。 聊天组件 (mgt-chat
) 不支持自定义模板化。
例如,若要创建用于呈现组件中的 mgt-agenda
事件的模板,请首先定义一个用于呈现事件的组件:
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>;
};
然后将其用作包装组件的子级,并将模板属性设置为 event
。
import { Agenda } from '@microsoft/mgt-react';
const App = (props) => {
return <Agenda>
<MyEvent template="event">
</Agenda>
}
属性 template
允许指定要覆盖的模板。 在这种情况下, MyEvent
组件将针对每个事件重复,并且对象 event
作为属性的 dataContext
一部分传递。
相关内容
反馈
https://aka.ms/ContentUserFeedback。
即将推出:在整个 2024 年,我们将逐步取消以“GitHub 问题”作为内容的反馈机制,并将其替换为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈