React以HTML属性的形式将所有数据传递给web组件。对于基元数据，这很好，但在传递丰富数据(如对象或数组(时不起作用。在这种情况下，您需要使用ref来传入对象。参见文档
我正试图在带有React框架的SPFx Web部件中使用mgt-people-picker，但无法使selected-people属性正常工作。我尝试将一组图形用户对象传递给它，但没有成功。
当我尝试使用时
document.querySelector('mgt-people-picker').selectUsersById(["id","id"])
它抛出一个错误，说"Property 'selectUsersById' does not exist on type 'Element'"
文件非常有限且不清楚，我找不到太多参考资料。有人能告诉我怎么用吗？
下面是一个通过id设置用户的示例：
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
return (
<mgt-people-picker ref="peoplePicker"></mgt-people-picker>
);
}
componentDidMount() {
if (this.refs.peoplePicker) {
let peoplePicker = this.refs.peoplePicker as MgtPeoplePicker;
peoplePicker.addEventListener('selectionChanged', e => console.log(peoplePicker.selectedPeople));
peoplePicker.selectUsersById(['4782e723-f4f4-4af3-a76e-25e3bab0d896']);
}
}
}
使用React，您可以使用@microsoft/mgt React模块中的PeoplePicker。这里有一个例子：
<PeoplePicker
selectionMode="single"
defaultSelectedUserIds={[Inky@pathto.onmicrosoft.com"}]}
selectionChanged={onChangePeople}
/>
事件处理程序：
function onChangePeople(e) {
console.log(e.detail);
}