使用 SharePoint spfx、React 和 Get 组件和模板的 Graph Toolkit 工作示例 [英] Working example for Graph Toolkit using SharePoint spfx, React and Get component with template

问题描述

我正在尝试在我的 SharePoint spfx Web 部件解决方案中使用 Microsoft Graph Toolkit，更具体地说是 React 版本 (@microsoft/mgt-react).

我已经成功导入了包，并且正确地呈现了控件.

但是我现在尝试根据控件的结果呈现控件.像这样:

const MyPerson = (props: MgtTemplateProps) =>{const { 人 } = props.dataContext;return <Person userId={person.userPrincipalName}></Person>;}

这是控制:

 <获取资源={`/groups/${this.props.groupid}/members`}><MyPerson 模板=值"/></获取>

什么都没有渲染出来.有人能帮我解决这个问题吗?

谢谢！

更新的工作样本:

 public render(): React.ReactElement{const LoadingPerson = (props: MgtTemplateProps) =>{return <div><Spinner size={SpinnerSize.large} label=正在加载成员..."/></div>;};const MemberPerson = (props: MgtTemplateProps) =>{const person = props.dataContext;return 
<Person userId={person.userPrincipalName} view={PersonViewType.twolines} fetchImage={true} showPresence={true}personCardInteraction={PersonCardInteraction.hover} line2Property=mail"></Person></div>;};返回 (<div><获取资源={`/groups/${this.props.groupId.t​​oString()}/members/microsoft.graph.user/?$count=true&$orderby=displayname`} ><MemberPerson 模板=值"；/><LoadingPerson 模板=正在加载"/></获取>
);}

解决方案

props.dataContext 没有 person 属性，而是 person 对象本身，请尝试更改您的 MyPerson 定义为:

const MyPerson = (props: MgtTemplateProps) =>{const person = props.dataContext;return <Person userId={person.userPrincipalName}></Person>;}

I'm trying to make use of the Microsoft Graph Toolkit inside my SharePoint spfx web part solution, and more specifically the React version (@microsoft/mgt-react).

I've managed importing the packages, and also render the control correctly.

However I am now trying to render controls based on the result from a control. Something like this:

const MyPerson = (props: MgtTemplateProps) => {
      const { person } = props.dataContext;
      return <Person userId={person.userPrincipalName}></Person>;
    }

And here is the control:

      <Get resource={`/groups/${this.props.groupid}/members`}>
        <MyPerson template="value" />
      </Get>

Nothing is rendered out. Could someone help me out fixing this?

Thanks!

UPDATED WORKING SAMPLE:

  public render(): React.ReactElement<IMemberListProps> {

const LoadingPerson = (props: MgtTemplateProps) => {
      return <div><Spinner size={SpinnerSize.large} label="Loading members..." /></div>;
    };

const MemberPerson = (props: MgtTemplateProps) => {
      const person = props.dataContext;
        return <div className={styles.memberRow}>
          <Person userId={person.userPrincipalName} view={PersonViewType.twolines} fetchImage={true} showPresence={true}
            personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person></div>;
    };

    return (
      <div>
        <Get resource={`/groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=true&$orderby=displayname`} >
          <MemberPerson template="value" />
          <LoadingPerson template="loading" />
        </Get>
      </div>
    );
}

解决方案

The props.dataContext doesn't have a person property but is the person object itself, try changing your MyPerson definition to:

const MyPerson = (props: MgtTemplateProps) => {
  const person = props.dataContext;
  return <Person userId={person.userPrincipalName}></Person>;
}

这篇关于使用 SharePoint spfx、React 和 Get 组件和模板的 Graph Toolkit 工作示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！