我需要一些特别的东西才能将 UI Fabric PeoplePicker 与 React 一起使用吗？

Question

我正在尝试使用来自 UI Fabric 的 Microsoft 控件 PeoplePicker 在我的应用程序中获得 Office 的感觉。我可以使用像 Dropdown 和按钮这样的控件，但是当我想使用 PeoplePicker 时，即使我不做任何更改，我的代码也会出错。

为了启动我的组件代码，我从 https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker 复制粘贴了 Normal People Picker，但出现了两个错误（暂时）。

第 48:66 行：解析错误：意外标记，应为 "," 而我的第 48 行是：
return peopleList.filter(item => doesTextStartWith(item.text as string, filterText));
指向item.text as string。我猜这个错误来自于在 JS 代码中使用 as string。当我将所有 as string 替换为 .toString() 时，错误消失。
意外令牌 (26:79) 我的第 26 行是：
const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
指向 [] 之后IPersonaProps.

由于我从 Microsoft 获取代码，但它无法在我的计算机上运行，我想我遗漏了一些东西。我期待得到与他们网站上的示例相同的结果。

我的节点模块中有 office-ui-fabric-react。

这是我的代码：

import * as React from 'react';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
import { IBasePickerSuggestionsProps, NormalPeoplePicker, ValidationState } from 'office-ui-fabric-react/lib/Pickers';
import { people, mru } from '@uifabric/example-data';

const suggestionProps: IBasePickerSuggestionsProps = {
  suggestionsHeaderText: 'Suggested People',
  mostRecentlyUsedHeaderText: 'Suggested Contacts',
  noResultsFoundText: 'No results found',
  loadingText: 'Loading',
  showRemoveButtons: true,
  suggestionsAvailableAlertText: 'People Picker Suggestions available',
  suggestionsContainerAriaLabel: 'Suggested contacts'
};

const checkboxStyles = {
  root: {
marginTop: 10
  }
};

export const PeoplePickerNormalExample: React.FunctionComponent = () => {
  const [delayResults, setDelayResults] = React.useState(false);
  const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
  const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
  const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(people);

  const picker = React.useRef(null);

  const onFilterChanged = (
filterText: string,
currentPersonas: IPersonaProps[],
limitResults?: number
  ): IPersonaProps[] | Promise<IPersonaProps[]> => {
if (filterText) {
  let filteredPersonas: IPersonaProps[] = filterPersonasByText(filterText);

  filteredPersonas = removeDuplicates(filteredPersonas, currentPersonas);
  filteredPersonas = limitResults ? filteredPersonas.slice(0, limitResults) : filteredPersonas;
  return filterPromise(filteredPersonas);
} else {
  return [];
}
  };

  const filterPersonasByText = (filterText: string): IPersonaProps[] => {
return peopleList.filter(item => doesTextStartWith(item.text as string, filterText));
  };

  const filterPromise = (personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> => {
if (delayResults) {
  return convertResultsToPromise(personasToReturn);
} else {
  return personasToReturn;
}
  };

  const returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> => {
setMostRecentlyUsed(removeDuplicates(mostRecentlyUsed, currentPersonas));
return filterPromise(mostRecentlyUsed);
  };

  const onRemoveSuggestion = (item: IPersonaProps): void => {
const indexPeopleList: number = peopleList.indexOf(item);
const indexMostRecentlyUsed: number = mostRecentlyUsed.indexOf(item);

if (indexPeopleList >= 0) {
  const newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
  setPeopleList(newPeople);
}

if (indexMostRecentlyUsed >= 0) {
  const newSuggestedPeople: IPersonaProps[] = mostRecentlyUsed
    .slice(0, indexMostRecentlyUsed)
    .concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
  setMostRecentlyUsed(newSuggestedPeople);
}
  };

  const onDisabledButtonClick = (): void => {
setIsPickerDisabled(!isPickerDisabled);
  };

  const onToggleDelayResultsChange = (): void => {
setDelayResults(!delayResults);
  };

  return (
<div>
  <NormalPeoplePicker
    onResolveSuggestions={onFilterChanged}
    onEmptyInputFocus={returnMostRecentlyUsed}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={suggestionProps}
    className={'ms-PeoplePicker'}
    key={'normal'}
    onRemoveSuggestion={onRemoveSuggestion}
    onValidateInput={validateInput}
    removeButtonAriaLabel={'Remove'}
    inputProps={{
      onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
      onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
      'aria-label': 'People Picker'
    }}
    componentRef={picker}
    onInputChange={onInputChange}
    resolveDelay={300}
    disabled={isPickerDisabled}
  />
  <Checkbox label="Disable People Picker" checked={isPickerDisabled} onChange={onDisabledButtonClick} styles={checkboxStyles} />
  <Checkbox
    label="Delay Suggestion Results"
    defaultChecked={delayResults}
    onChange={onToggleDelayResultsChange}
    styles={checkboxStyles} />
</div>
  );
};

function doesTextStartWith(text: string, filterText: string): boolean {
  return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
}

function removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[]) {
  return personas.filter(persona => !listContainsPersona(persona, possibleDupes));
}

function listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]) {
  if (!personas || !personas.length || personas.length === 0) {
return false;
  }
  return personas.filter(item => item.text === persona.text).length > 0;
}

function convertResultsToPromise(results: IPersonaProps[]): Promise<IPersonaProps[]> {
  return new Promise<IPersonaProps[]>((resolve, reject) => setTimeout(() => resolve(results), 2000));
}

function getTextFromItem(persona: IPersonaProps): string {
  return persona.text as string;
}

function validateInput(input: string): ValidationState {
  if (input.indexOf('@') !== -1) {
return ValidationState.valid;
  } else if (input.length > 1) {
return ValidationState.warning;
  } else {
return ValidationState.invalid;
  }
}

/**
 * Takes in the picker input and modifies it in whichever way
 * the caller wants, i.e. parsing entries copied from Outlook (sample
 * input: "Aaron Reid <aaron>").
 *
 * @param input The text entered into the picker.
 */
function onInputChange(input: string): string {
  const outlookRegEx = /<.*>/g;
  const emailAddress = outlookRegEx.exec(input);

  if (emailAddress && emailAddress[0]) {
return emailAddress[0].substring(1, emailAddress[0].length - 1);
  }

  return input;
}

我在我的应用程序中这样使用它。我放了 <...> 以保持代码简短。本节中的一切都在工作。

import React from 'react';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric'
import PeoplePickerNormalExample from "./components/MyCustom_Picker.js"

class App extends React.Component {
  render() {
    return ( 
      <Fabric className = "App" >
        <PeoplePickerNormalExample / >
        <...>
      </Fabric>
    );
  }
}

export default App;

Answer 1

我认为您的应用不是 Typescript (TS)。您正在复制的 Office UI 示例在 TS 中。要将示例转换回原始 JS，请删除类型（例如 : string、: number、: IPersonaProps[]）。

看看这个 link：https://www.typescriptlang.org/play/。将示例代码粘贴到那里以尝试将其转换为 JS。

我需要一些特别的东西才能将 UI Fabric PeoplePicker 与 React 一起使用吗？

Do I need something particular to use UI Fabric PeoplePicker with React?

javascript

office-addins

reactjs

office-ui-fabric

office-ui-fabric-react