SPFX中如何在Mgt Person组件传入自定义人员数据并展示4行信息

1. 核心问题分析 #

• 不可同时设置personQuery与personDetails：只要指定personQuery，组件会优先调用Graph API拉取数据，直接覆盖你传入的自定义personDetails。
• 默认ViewType.threelines仅支持三行展示：需要通过自定义模板实现4行内容的自定义布局。

2. 实现步骤与代码示例 #

第一步：移除personQuery并传入自定义数据 #

删除组件上的personQuery="me"属性，确保组件使用你传入的自定义人员数据。

第二步：自定义模板实现4行展示 #

利用Mgt组件的模板功能，重写default模板，将四个字段分别放在单独行中。

完整代码示例：

import * as React from 'react';
import { Person, avatarType, PersonCardInteraction } from '@microsoft/mgt-react';
import { Template } from '@microsoft/mgt-react';

export interface IMgtComponentsProps {}

export default class MgtComponents extends React.Component<IMgtComponentsProps, {}> {
  private personDetails = {
    displayName: 'Bill Gates',
    mail: 'nikola@contoso.com',
    role:'Developer',
    community:'Software Enginnering'
  };

  public render(): React.ReactElement<IMgtComponentsProps> {
    return (
      <Person
        personDetails={this.personDetails}
        fetchImage={true}
        avatarType={avatarType.photo}
        personCardInteraction={PersonCardInteraction.hover}
      >
        {/* 自定义默认模板，展示4行人员详情 */}
        <Template template="default">
          {(context) => {
            const person = context.person;
            return (
              <div className="mgt-person__details">
                <div className="mgt-person__display-name">{person.displayName}</div>
                <div className="mgt-person__custom-line">{person.mail}</div>
                <div className="mgt-person__custom-line">{person.role}</div>
                <div className="mgt-person__custom-line">{person.community}</div>
              </div>
            );
          }}
        </Template>
      </Person>
    );
  }
}

第三步：可选样式调整 #

如果需要优化行间距或字体样式，可通过自定义CSS类调整：

.mgt-person__custom-line {
  margin: 3px 0;
  font-size: 14px;
  color: #666;
}

3. 关键说明 #

• personDetails支持传入自定义字段（如role、community），模板中可直接通过context.person访问这些字段。
• 自定义模板完全可控布局，可根据需求调整每行的内容、样式和顺序。

内容的提问来源于stack exchange，提问作者Kshitij Gupta