如何在SPFX的管理人员中显示自定义数据

Question

我想显示来自API的自定义数据，该数据将在Person Mgt中有4行数据，我不想使用personquery中的默认数据，所以我如何在人员管理中传递人员数据列表？默认情况下，它只显示三行数据，但我想在SPFX中的四行不同行中显示个人的四个详细信息。

我提供了代码的示例实现，

public render(): React.ReactElement<IMgtComponentsProps> {
return (
<Person
personQuery="me"
//personDetails={personDetails}
view={ViewType.threelines}
fetchImage={true}
avatarType={avatarType.photo}
personCardInteraction={PersonCardInteraction.hover} />
);
}

我将拥有类似类型的自定义数据，如下所示，所以我想根据用户显示这些详细信息。

const personDetails = {
displayName: 'Bill Gates',
mail: '[e-mail]',
role:'Developer',
community:'Software Enginnering'
}

我尝试在Person的personDetails属性中传递此对象，但它不起作用。

Answer 1

目前只有通过自定义渲染模板支持第四行数据

这里有一个使用原始web组件而不是React Wrapper的例子。

<mgt-person class="my-person" person-query="me">
<template>
<div>
Hello, my name is: {{person.displayName}} <br>
{{person.role}} <br>
{{person.community}} <br>
{{person.mail}}
</div>
</template>
<template data-type="loading">
Loading
</template>
</mgt-person>

const person = document.querySelector('.my-person');
person.personDetails = {
displayName: 'Bill Gates',
mail: '[e-mail]',
role: 'Developer',
community: 'Software Enginnering'
};

使用现有的三线视图，您可以将每条线映射到您的自定义特性，假设您正确传递了上述自定义数据，则可以让组件在每条线上渲染选定的特性。

<mgt-person 
class="my-person"
view="threeLines"
line2-property="role"
line2-property="community"
person-card="hover" 
fetch-image>
</mgt-person>

对于四行案例来说，好消息是，我们正在将其添加到库中，作为目前正在开发的v3版本的一部分