Как использовать mgt-people-picker в рамках реагирования

Question

Я пытаюсь использовать mgt-people-picker внутри своей SPFx Webpart с React framework и не могу заставить работать атрибут selected-people. Я попытался передать массив графических пользовательских объектов, но безуспешно.

Когда я пытался использовать

document.querySelector('mgt-people-picker').selectUsersById(["id","id"])

, он выдавал ошибку, говорящую "Property 'selectUsersById' does not exist on type 'Element'"

Документация довольно ограничена и неясна, и нет большого количества ссылок, что я мог найти. Может кто-нибудь сказать мне, как его использовать?

Answer 1

React передает все данные веб-компонентам в виде атрибутов HTML. Для примитивных данных это хорошо, но это не работает при передаче богатых данных, таких как объекты или массивы. В этих случаях вам нужно будет использовать ссылку для передачи объекта. См. документы

Вот пример настройки пользователей по идентификатору:

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']);
    }
  }
}